{"version":3,"sources":["../../src/Button/Button.css.ts"],"names":["css","vars","match","color","typography","spacing","rounded","medium","large","small","tiny","sizeStyles","outlined","primary","args","secondary","critical","accent","buttonCSS","props","fullWidth","size","gapToken","variantStyle"],"mappings":"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","sourcesContent":["import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ElementType } from \"react\";\nimport { match } from \"ts-pattern\";\nimport type { ButtonProps } from \"./Button.types\";\n\nconst {\n  semantic: { color, typography },\n  spacing,\n  rounded,\n} = vars;\n\nconst medium = css`\n  padding: ${spacing[2]} ${spacing[3]};\n  min-width: 64px;\n  border-radius: ${rounded.medium};\n\n  ${typography[\"label-medium-bold\"]}\n`;\n\nconst large = css`\n  padding: ${vars.spacing[3]} ${vars.spacing[4]};\n  min-width: 80px;\n  border-radius: ${vars.rounded.medium};\n\n  ${typography[\"label-large-bold\"]}\n`;\n\nconst small = css`\n  padding: ${vars.spacing[1]} ${vars.spacing[3]};\n  min-width: 48px;\n  border-radius: ${vars.rounded.small};\n\n  ${typography[\"label-medium-bold\"]}\n`;\n\nconst tiny = css`\n  padding: ${vars.spacing[15]} ${vars.spacing[2]};\n  min-width: 40px;\n  border-radius: ${vars.rounded.small};\n\n  ${typography[\"label-small-bold\"]}\n`;\n\nexport const sizeStyles = {\n  medium,\n  large,\n  small,\n  tiny,\n};\n\nconst outlined = () =>\n  css({\n    \"--clay-button-background-color\": color.actionSecondary,\n\n    backgroundColor: \"var(--clay-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-button-background-color)\",\n\n    color: color.textSecondary,\n    svg: {\n      color: color.iconSecondary,\n    },\n\n    outline: `1px solid ${color.border}`,\n    outlineOffset: \"-1px\",\n\n    \"&:hover:not(:disabled)\": {\n      outlineColor: color.borderHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      outlineColor: color.borderSub,\n    },\n\n    \"&:disabled\": {\n      \"--clay-button-background-color\": color.actionSecondaryDisabled,\n\n      color: color.textDisabled,\n      outlineColor: \"transparent\",\n      svg: {\n        color: color.textDisabled,\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-button-background-color\": color.actionSecondary,\n\n        color: color.textSecondary,\n        outlineColor: color.borderSub,\n        svg: {\n          color: color.icon,\n        },\n      },\n    },\n  });\n\nconst primary = <E extends ElementType>(args?: Extract<ButtonProps<E>, { variant: \"primary\" }>) =>\n  css({\n    \"--clay-button-background-color\": args?.tonal ? color.actionPrimaryTonal : color.actionPrimary,\n\n    backgroundColor: \"var(--clay-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-button-background-color)\",\n\n    color: args?.tonal ? color.textSecondary : color.textInverse,\n    svg: {\n      color: args?.tonal ? color.iconSecondary : color.iconInverse,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-button-background-color\": args?.tonal\n        ? color.actionPrimaryTonalHover\n        : color.actionPrimaryHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-button-background-color\": args?.tonal\n        ? color.actionPrimaryTonalPressed\n        : color.actionPrimaryPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n      svg: {\n        color: color.textDisabled,\n      },\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-button-background-color\": args?.tonal\n          ? color.actionPrimaryTonalDisabled\n          : color.actionPrimaryDisabled,\n\n        svg: {\n          color: color.textDisabled,\n        },\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-button-background-color\": args?.tonal\n          ? color.actionPrimaryTonalPressed\n          : color.actionPrimaryPressed,\n\n        color: args?.tonal ? color.textSecondary : color.textInverse,\n        svg: {\n          color: args?.tonal ? color.icon : color.iconInverse,\n        },\n      },\n    },\n  });\n\nconst secondary = () =>\n  css({\n    \"--clay-button-background-color\": \"transparent\",\n\n    backgroundColor: \"var(--clay-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-button-background-color)\",\n\n    color: color.textSecondary,\n    svg: {\n      color: color.iconSecondary,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-button-background-color\": color.actionSecondaryHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-button-background-color\": color.actionSecondaryPressed,\n    },\n\n    \"&:disabled\": {\n      \"--clay-button-background-color\": color.actionSecondaryDisabled,\n\n      color: color.textDisabled,\n      svg: {\n        color: color.textDisabled,\n      },\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-button-background-color\": \"transparent\",\n\n        color: color.textSecondary,\n        svg: {\n          color: color.icon,\n        },\n      },\n    },\n  });\n\nconst critical = <E extends ElementType>(args?: Extract<ButtonProps<E>, { variant: \"critical\" }>) =>\n  css({\n    \"--clay-button-background-color\": args?.tonal\n      ? color.actionCriticalTonal\n      : color.actionCritical,\n\n    backgroundColor: \"var(--clay-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-button-background-color)\",\n\n    color: args?.tonal ? color.textCritical : color.textOn,\n    svg: {\n      color: args?.tonal ? color.iconCritical : color.iconOn,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-button-background-color\": args?.tonal\n        ? color.actionCriticalTonalHover\n        : color.actionCriticalHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-button-background-color\": args?.tonal\n        ? color.actionCriticalTonalPressed\n        : color.actionCriticalPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n      svg: {\n        color: color.textDisabled,\n      },\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-button-background-color\": args?.tonal\n          ? color.actionCriticalTonalDisabled\n          : color.actionCriticalDisabled,\n\n        stroke: color.textDisabled,\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-button-background-color\": args?.tonal\n          ? color.actionCriticalTonalPressed\n          : color.actionCriticalPressed,\n\n        color: args?.tonal ? color.textCritical : color.textOn,\n        svg: {\n          color: args?.tonal ? color.iconCritical : color.iconOn,\n        },\n      },\n    },\n  });\n\nconst accent = <E extends ElementType>(args?: Extract<ButtonProps<E>, { variant: \"accent\" }>) =>\n  css({\n    \"--clay-button-background-color\": args?.tonal ? color.actionAccentTonal : color.actionAccent,\n\n    backgroundColor: \"var(--clay-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-button-background-color)\",\n\n    color: args?.tonal ? color.textAccent : color.text,\n    svg: {\n      color: args?.tonal ? color.iconAccent : color.icon,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-button-background-color\": args?.tonal\n        ? color.actionAccentTonalHover\n        : color.actionAccentHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-button-background-color\": args?.tonal\n        ? color.actionAccentTonalPressed\n        : color.actionAccentPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n      svg: {\n        color: color.textDisabled,\n      },\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-button-background-color\": args?.tonal\n          ? color.actionAccentTonalDisabled\n          : color.actionAccentDisabled,\n\n        stroke: color.textDisabled,\n      },\n\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-button-background-color\": args?.tonal\n          ? color.actionAccentTonalPressed\n          : color.actionAccentPressed,\n\n        color: args?.tonal ? color.textAccent : color.text,\n        svg: {\n          color: args?.tonal ? color.iconAccent : color.icon,\n        },\n      },\n    },\n  });\n\nexport const buttonCSS = <E extends ElementType>(props: ButtonProps<E>) => {\n  const { fullWidth, rounded, size = \"medium\" } = props;\n  const gapToken = size === \"large\" || size === \"medium\" ? 2 : 1;\n\n  const variantStyle = match(props)\n    .with({ variant: \"primary\" }, primary)\n    .with({ variant: \"secondary\" }, secondary)\n    .with({ variant: \"critical\" }, critical)\n    .with({ variant: \"accent\" }, accent)\n    .with({ variant: \"outlined\" }, outlined)\n    .exhaustive();\n\n  return css`\n    display: inline-flex;\n    justify-content: center;\n    align-items: center;\n    gap: ${spacing[gapToken]};\n    ${sizeStyles[size]};\n\n    ${variantStyle};\n    ${rounded && `border-radius: ${vars.rounded.full};`}\n\n    width: ${fullWidth ? \"100%\" : \"fit-content\"};\n    height: fit-content;\n\n    transition-timing-function: ease-out;\n    transition-duration: 100ms;\n    transition-property: background-color, color;\n  `;\n};\n"]}