{"version":3,"sources":["../../../src/Button/IconButton/IconButton.tsx","../../../src/Spinner/Spinner.css.ts","../../../src/Spinner/Spinner.tsx","../../../src/Button/IconButton/IconButton.css.ts"],"names":["forwardRef","css","keyframes","spin","sizeToPxMap","spinnerCSS","jsx","Spinner","size","speed","variantMap","__spreadValues","vars","match","color","typography","spacing","rounded","medium","large","small","tiny","sizeStyles","outlined","primary","args","secondary","critical","accent","iconButtonCSS","props","fullWidth","variantStyle","IconButton","ref","_a","Element","isLoading","isDisabled","icon","__spreadProps","IconButtonNameSpace"],"mappings":";6aAGA,OAAS,cAAAA,MAAkB,QCH3B,OAAS,OAAAC,EAAK,aAAAC,MAAiB,iBAI/B,IAAMC,EAAOD;AAAA;AAAA;AAAA;AAAA,EAMAE,EAAc,CACzB,OAAQ,OACR,MAAO,OACP,OAAQ,OACR,MAAO,MACT,EAEaC,EAAaJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAQXE,CAAI;ECQT,cAAAG,MAAA,6BA5BH,IAAMC,EAAU,CAAC,CAAE,KAAAC,EAAO,SAAU,MAAAC,EAAQ,IAAK,IAAoB,CAC1E,IAAMC,EAAa,CACjB,KAAM,CACJ,CAACF,CAAI,EAAG,CACN,iBAAkBJ,EAAYI,CAAI,CACpC,CACF,EACA,MAAO,CACL,kBAAmBC,CACrB,CACF,EAEA,OACEH,EAAC,QACC,MAAOK,IAAA,GACFD,EAAW,KAAKF,CAAI,GACpBE,EAAW,OAEhB,IAAKL,EAEL,SAAAC,EAAC,OACC,MAAM,OACN,OAAO,OACP,QAAQ,YACR,KAAK,OACL,MAAM,6BAEN,SAAAA,EAAC,KACC,SAAAA,EAAC,QACC,EAAE,o7BACF,KAAK,eACP,EACF,EACF,EACF,CAEJ,ECzCA,OAAS,OAAAL,MAAW,iBACpB,OAAS,QAAAW,MAAY,sBAErB,OAAS,SAAAC,MAAa,aAGtB,GAAM,CACJ,SAAU,CAAE,MAAAC,EAAO,WAAAC,CAAW,EAC9B,QAAAC,EACA,QAAAC,CACF,EAAIL,EAEEM,EAASjB;AAAA,aACFe,EAAQ,CAAC,CAAC;AAAA,mBACJC,EAAQ,MAAM;AAAA,IAC7BF,EAAW,cAAc,CAAC;AAAA,EAGxBI,EAAQlB;AAAA,aACDW,EAAK,QAAQ,CAAC,CAAC;AAAA,mBACTA,EAAK,QAAQ,MAAM;AAAA;AAAA,IAElCG,EAAW,aAAa,CAAC;AAAA,EAGvBK,EAAQnB;AAAA,aACDW,EAAK,QAAQ,CAAC,CAAC;AAAA,mBACTA,EAAK,QAAQ,KAAK;AAAA;AAAA,IAEjCG,EAAW,cAAc,CAAC;AAAA,EAGxBM,EAAOpB;AAAA,aACAW,EAAK,QAAQ,EAAE,CAAC;AAAA,mBACVA,EAAK,QAAQ,KAAK;AAAA;AAAA,IAEjCG,EAAW,aAAa,CAAC;AAAA,EAGhBO,EAAa,CACxB,OAAAJ,EACA,MAAAC,EACA,MAAAC,EACA,KAAAC,CACF,EAEME,EAAW,IACftB,EAAI,CACF,sCAAuCa,EAAM,gBAE7C,gBAAiB,2CACjB,gBAAiB,2CAEjB,MAAOA,EAAM,cACb,IAAK,CACH,MAAOA,EAAM,aACf,EAEA,QAAS,aAAaA,EAAM,MAAM,GAClC,cAAe,OAEf,yBAA0B,CACxB,aAAcA,EAAM,WACtB,EAEA,0BAA2B,CACzB,aAAcA,EAAM,SACtB,EAEA,aAAc,CACZ,sCAAuCA,EAAM,wBAE7C,MAAOA,EAAM,aACb,aAAc,cACd,IAAK,CACH,MAAOA,EAAM,YACf,EAEA,+BAAgC,CAC9B,sCAAuCA,EAAM,gBAE7C,MAAOA,EAAM,cACb,aAAcA,EAAM,UACpB,IAAK,CACH,MAAOA,EAAM,IACf,CACF,CACF,CACF,CAAC,EAEGU,EACJC,GAEAxB,EAAI,CACF,sCAAuCwB,GAAA,MAAAA,EAAM,MACzCX,EAAM,mBACNA,EAAM,cAEV,gBAAiB,2CACjB,gBAAiB,2CAEjB,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,cAAgBA,EAAM,YACjD,IAAK,CACH,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,cAAgBA,EAAM,WACnD,EAEA,yBAA0B,CACxB,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,wBACNA,EAAM,kBACZ,EAEA,0BAA2B,CACzB,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,0BACNA,EAAM,oBACZ,EAEA,aAAc,CACZ,MAAOA,EAAM,aAEb,qCAAsC,CACpC,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,2BACNA,EAAM,sBAEV,IAAK,CACH,MAAOA,EAAM,YACf,CACF,EAEA,+BAAgC,CAC9B,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,0BACNA,EAAM,qBAEV,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,cAAgBA,EAAM,YACjD,IAAK,CACH,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,KAAOA,EAAM,MAC1C,CACF,CACF,CACF,CAAC,EAEGY,EAAY,IAChBzB,EAAI,CACF,sCAAuC,cAEvC,gBAAiB,2CACjB,gBAAiB,2CAEjB,MAAOa,EAAM,cACb,IAAK,CACH,MAAOA,EAAM,aACf,EAEA,yBAA0B,CACxB,sCAAuCA,EAAM,oBAC/C,EAEA,0BAA2B,CACzB,sCAAuCA,EAAM,sBAC/C,EAEA,aAAc,CACZ,sCAAuCA,EAAM,wBAE7C,MAAOA,EAAM,aACb,+BAAgC,CAC9B,sCAAuC,cAEvC,MAAOA,EAAM,cACb,IAAK,CACH,MAAOA,EAAM,IACf,CACF,CACF,CACF,CAAC,EAEGa,EACJF,GAEAxB,EAAI,CACF,sCAAuCwB,GAAA,MAAAA,EAAM,MACzCX,EAAM,oBACNA,EAAM,eAEV,gBAAiB,2CACjB,gBAAiB,2CAEjB,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,aAAeA,EAAM,OAChD,IAAK,CACH,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,aAAeA,EAAM,MAClD,EAEA,yBAA0B,CACxB,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,yBACNA,EAAM,mBACZ,EAEA,0BAA2B,CACzB,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,2BACNA,EAAM,qBACZ,EAEA,aAAc,CACZ,MAAOA,EAAM,aAEb,qCAAsC,CACpC,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,4BACNA,EAAM,uBAEV,OAAQA,EAAM,YAChB,EAEA,+BAAgC,CAC9B,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,2BACNA,EAAM,sBAEV,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,aAAeA,EAAM,OAChD,IAAK,CACH,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,aAAeA,EAAM,MAClD,CACF,CACF,CACF,CAAC,EAEGc,EAAiCH,GACrCxB,EAAI,CACF,sCAAuCwB,GAAA,MAAAA,EAAM,MACzCX,EAAM,kBACNA,EAAM,aAEV,gBAAiB,2CACjB,gBAAiB,2CAEjB,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,WAAaA,EAAM,KAC9C,IAAK,CACH,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,WAAaA,EAAM,IAChD,EAEA,yBAA0B,CACxB,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,uBACNA,EAAM,iBACZ,EAEA,0BAA2B,CACzB,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,yBACNA,EAAM,mBACZ,EAEA,aAAc,CACZ,MAAOA,EAAM,aAEb,qCAAsC,CACpC,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,0BACNA,EAAM,qBAEV,OAAQA,EAAM,YAChB,EAEA,+BAAgC,CAC9B,sCAAuCW,GAAA,MAAAA,EAAM,MACzCX,EAAM,yBACNA,EAAM,oBAEV,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,WAAaA,EAAM,KAC9C,IAAK,CACH,MAAOW,GAAA,MAAAA,EAAM,MAAQX,EAAM,WAAaA,EAAM,IAChD,CACF,CACF,CACF,CAAC,EAEUe,EAAwCC,GAA8B,CACjF,GAAM,CAAE,UAAAC,EAAW,QAAAd,EAAS,KAAAT,EAAO,QAAS,EAAIsB,EAE1CE,EAAenB,EAAMiB,CAAK,EAC7B,KAAK,CAAE,QAAS,SAAU,EAAGN,CAAO,EACpC,KAAK,CAAE,QAAS,WAAY,EAAGE,CAAS,EACxC,KAAK,CAAE,QAAS,UAAW,EAAGC,CAAQ,EACtC,KAAK,CAAE,QAAS,QAAS,EAAGC,CAAM,EAClC,KAAK,CAAE,QAAS,UAAW,EAAGL,CAAQ,EACtC,WAAW,EAEd,OAAOtB;AAAA;AAAA;AAAA;AAAA,MAIHqB,EAAWd,CAAI,CAAC;AAAA;AAAA,MAEhBwB,CAAY;AAAA,MACZf,GAAW,kBAAkBL,EAAK,QAAQ,IAAI,GAAG;AAAA;AAAA,aAE1CmB,EAAY,OAAS,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,GAO/C,EHxRqB,cAAAzB,MAAA,6BAdrB,IAAM2B,EAAkCjC,EACtC,CAAwB8B,EAA2BI,IAAyC,CAf9F,IAAAC,EAgBI,IAAMC,GAAUD,EAAAL,EAAM,KAAN,KAAAK,EAAY,SACtB,CAAE,UAAAE,EAAW,WAAAC,EAAY,KAAAC,CAAK,EAAIT,EAExC,OACExB,EAAC8B,EAAAI,EAAA7B,IAAA,CACC,IAAKuB,EACL,qBAAoBG,EACpB,SAAUA,GAAaC,EACvB,IAAK,CAACT,EAAcC,CAAK,EAAGA,EAAM,EAAE,GAChCA,GACAA,EAAM,QANX,CAQE,SAAAO,EAAY/B,EAACC,EAAA,EAAQ,EAAKgC,GAC7B,CAEJ,CACF,EAEME,GAAsB,OAAO,OAAOR,EAAY,CAAE,YAAa,iBAAkB,CAAC","sourcesContent":["/** @jsxImportSource @emotion/react */\n\nimport type { ComponentPropsWithRef, ElementType } from \"react\";\nimport { forwardRef } from \"react\";\nimport { Spinner } from \"../../Spinner\";\nimport { iconButtonCSS } from \"./IconButton.css\";\nimport type { IconButtonProps } from \"./IconButton.types\";\n\ntype IconButtonComponent = <E extends ElementType = \"button\">(\n  props: IconButtonProps<E> & {\n    ref?: ComponentPropsWithRef<E>[\"ref\"];\n  },\n) => JSX.Element | null;\n\nconst IconButton: IconButtonComponent = forwardRef(\n  <E extends ElementType>(props: IconButtonProps<E>, ref: ComponentPropsWithRef<E>[\"ref\"]) => {\n    const Element = props.as ?? \"button\";\n    const { isLoading, isDisabled, icon } = props;\n\n    return (\n      <Element\n        ref={ref}\n        data-imweb-loading={isLoading}\n        disabled={isLoading || isDisabled}\n        css={[iconButtonCSS(props), props.sx]}\n        {...props}\n        {...props.native}\n      >\n        {isLoading ? <Spinner /> : icon}\n      </Element>\n    );\n  },\n);\n\nconst IconButtonNameSpace = Object.assign(IconButton, { displayName: \"Clay.IconButton\" });\n\nexport { IconButtonNameSpace as IconButton };\n","import { css, keyframes } from \"@emotion/react\";\nimport type { NumberPixel } from \"../types\";\nimport type { SpinnerProps } from \"./Spinner.types\";\n\nconst spin = keyframes`\n  100% {\n    transform: rotate(360deg);\n  }\n`;\n\nexport const sizeToPxMap = {\n  xsmall: \"16px\",\n  small: \"24px\",\n  medium: \"32px\",\n  large: \"64px\",\n} satisfies Record<Required<SpinnerProps>[\"size\"], NumberPixel>;\n\nexport const spinnerCSS = css`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--spinner-size);\n  height: var(--spinner-size);\n\n  animation: ${spin} var(--spinner-speed) linear infinite;\n`;\n","/** @jsxImportSource @emotion/react */\n\nimport { sizeToPxMap, spinnerCSS } from \"./Spinner.css\";\nimport type { SpinnerProps } from \"./Spinner.types\";\n\nexport const Spinner = ({ size = \"xsmall\", speed = \"1s\" }: SpinnerProps) => {\n  const variantMap = {\n    size: {\n      [size]: {\n        \"--spinner-size\": sizeToPxMap[size],\n      },\n    } as Record<string, Record<string, string>>,\n    speed: {\n      \"--spinner-speed\": speed,\n    } as Record<string, string>,\n  };\n\n  return (\n    <span\n      style={{\n        ...variantMap.size[size],\n        ...variantMap.speed,\n      }}\n      css={spinnerCSS}\n    >\n      <svg\n        width=\"100%\"\n        height=\"100%\"\n        viewBox=\"0 0 16 16\"\n        fill=\"none\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n      >\n        <g>\n          <path\n            d=\"M14.75 8C15.1642 8 15.5039 7.66338 15.4625 7.25123C15.3501 6.13087 14.9865 5.04679 14.3948 4.08126C13.6721 2.90192 12.6373 1.9454 11.4049 1.31745C10.1725 0.689506 8.79046 0.414598 7.41156 0.52312C6.03265 0.631642 4.71062 1.11937 3.59161 1.93237C2.4726 2.74538 1.60022 3.85199 1.0709 5.12988C0.541588 6.40776 0.375962 7.80712 0.592338 9.17326C0.808713 10.5394 1.39866 11.8191 2.29696 12.8709C3.03239 13.7319 3.95104 14.4128 4.98183 14.8659C5.36102 15.0326 5.78614 14.8136 5.91414 14.4196C6.04214 14.0257 5.82382 13.6068 5.44891 13.4307C4.67966 13.0693 3.99324 12.5473 3.43756 11.8967C2.71893 11.0553 2.24697 10.0315 2.07387 8.93861C1.90077 7.8457 2.03327 6.7262 2.45672 5.7039C2.88017 4.6816 3.57808 3.7963 4.47329 3.1459C5.36849 2.49549 6.42612 2.10531 7.52924 2.0185C8.63237 1.93168 9.73801 2.1516 10.7239 2.65396C11.7099 3.15632 12.5377 3.92153 13.1158 4.86501C13.5629 5.59453 13.8472 6.40866 13.9532 7.25194C14.0048 7.66292 14.3358 8 14.75 8Z\"\n            fill=\"currentColor\"\n          />\n        </g>\n      </svg>\n    </span>\n  );\n};\n","import { css } from \"@emotion/react\";\nimport { vars } from \"@imwebme/clay-token\";\nimport type { ElementType } from \"react\";\nimport { match } from \"ts-pattern\";\nimport type { IconButtonProps } from \"./IconButton.types\";\n\nconst {\n  semantic: { color, typography },\n  spacing,\n  rounded,\n} = vars;\n\nconst medium = css`\n  padding: ${spacing[3]};\n  border-radius: ${rounded.medium};\n  ${typography[\"label-medium\"]}\n`;\n\nconst large = css`\n  padding: ${vars.spacing[4]};\n  border-radius: ${vars.rounded.medium};\n\n  ${typography[\"label-large\"]}\n`;\n\nconst small = css`\n  padding: ${vars.spacing[2]};\n  border-radius: ${vars.rounded.small};\n\n  ${typography[\"label-medium\"]}\n`;\n\nconst tiny = css`\n  padding: ${vars.spacing[15]};\n  border-radius: ${vars.rounded.small};\n\n  ${typography[\"label-small\"]}\n`;\n\nexport const sizeStyles = {\n  medium,\n  large,\n  small,\n  tiny,\n};\n\nconst outlined = () =>\n  css({\n    \"--clay-icon-button-background-color\": color.actionSecondary,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-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-icon-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-icon-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>(\n  args?: Extract<IconButtonProps<E>, { variant: \"primary\" }>,\n) =>\n  css({\n    \"--clay-icon-button-background-color\": args?.tonal\n      ? color.actionPrimaryTonal\n      : color.actionPrimary,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-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-icon-button-background-color\": args?.tonal\n        ? color.actionPrimaryTonalHover\n        : color.actionPrimaryHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionPrimaryTonalPressed\n        : color.actionPrimaryPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-icon-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-icon-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.iconOn,\n        },\n      },\n    },\n  });\n\nconst secondary = () =>\n  css({\n    \"--clay-icon-button-background-color\": \"transparent\",\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-button-background-color)\",\n\n    color: color.textSecondary,\n    svg: {\n      color: color.iconSecondary,\n    },\n\n    \"&:hover:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": color.actionSecondaryHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": color.actionSecondaryPressed,\n    },\n\n    \"&:disabled\": {\n      \"--clay-icon-button-background-color\": color.actionSecondaryDisabled,\n\n      color: color.textDisabled,\n      '&[data-imweb-loading=\"true\"]': {\n        \"--clay-icon-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>(\n  args?: Extract<IconButtonProps<E>, { variant: \"critical\" }>,\n) =>\n  css({\n    \"--clay-icon-button-background-color\": args?.tonal\n      ? color.actionCriticalTonal\n      : color.actionCritical,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-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-icon-button-background-color\": args?.tonal\n        ? color.actionCriticalTonalHover\n        : color.actionCriticalHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionCriticalTonalPressed\n        : color.actionCriticalPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-icon-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-icon-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<IconButtonProps<E>, { variant: \"accent\" }>) =>\n  css({\n    \"--clay-icon-button-background-color\": args?.tonal\n      ? color.actionAccentTonal\n      : color.actionAccent,\n\n    backgroundColor: \"var(--clay-icon-button-background-color)\",\n    \"--clay-dot-bg\": \"var(--clay-icon-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-icon-button-background-color\": args?.tonal\n        ? color.actionAccentTonalHover\n        : color.actionAccentHover,\n    },\n\n    \"&:active:not(:disabled)\": {\n      \"--clay-icon-button-background-color\": args?.tonal\n        ? color.actionAccentTonalPressed\n        : color.actionAccentPressed,\n    },\n\n    \"&:disabled\": {\n      color: color.textDisabled,\n\n      '&:not([data-imweb-loading=\"true\"])': {\n        \"--clay-icon-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-icon-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 iconButtonCSS = <E extends ElementType>(props: IconButtonProps<E>) => {\n  const { fullWidth, rounded, size = \"medium\" } = props;\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    ${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"]}