softable-pixels-web 1.1.5 → 1.1.6

package/dist/{Checkbox-DE2wp1rK.js → Checkbox-6ivVbzcX.js}

@@ -34,7 +34,7 @@ const Label$1 = (props) => {
 		style: styles.container,
 		children: /* @__PURE__ */ jsx(Typography, {
 			variant: labelVariant ?? "b1",
-			fontWeight: "normal",
+			fontWeight: "regular",
 			children: label
 		})
 	});
@@ -165,4 +165,4 @@ const Checkbox$1 = (props) => {
 
 //#endregion
 export { Checkbox$1 as t };
-//# sourceMappingURL=Checkbox-DE2wp1rK.js.map
+//# sourceMappingURL=Checkbox-6ivVbzcX.js.map

package/dist/Checkbox-6ivVbzcX.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox-6ivVbzcX.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { disabled } = props\n\n  return styled({\n    container: {\n      userSelect: 'none',\n      opacity: disabled ? 0.6 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      transition: 'all 200ms',\n\n      __rules: {\n        ':hover': { color: 'var(--px-color-secondary)' }\n      }\n    }\n  })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const { idFor, label, labelVariant } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.disabled, p.labelVariant, p.label],\n    applyCommonProps: true\n  })\n\n  return (\n    <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n      <Typography variant={labelVariant ?? 'b1'} fontWeight=\"regular\">\n        {label}\n      </Typography>\n    </LabelRadix.Root>\n  )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n  return {\n    id: useId()\n  }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n  size: {\n    sm: { width: '1rem', height: '1rem' },\n    md: { width: '1.25rem', height: '1.25rem' },\n    lg: { width: '1.5rem', height: '1.5rem' }\n  },\n  radius: {\n    none: { borderRadius: 0 },\n    sm: { borderRadius: '0.25rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '100%' }\n  }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n  const {\n    color,\n    checked,\n    size = 'md',\n    radius = 'md',\n    disabled = false,\n    labelPlacement = 'right'\n  } = props\n\n  const focusIndicatorOffsetColor = '#fff'\n\n  return styled({\n    container: {\n      display: 'flex',\n      columnGap: '0.5rem',\n      alignItems: 'center',\n      '--px-ring-color': color ?? undefined,\n      flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n    },\n\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked ? color : 'white',\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n      transition: 'color 200ms',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      ...CHECKBOX_STYLES.size[size],\n      ...CHECKBOX_STYLES.radius[radius],\n\n      __rules: {\n        '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n        }\n      }\n    },\n\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'var(--px-text-primary, #4b5563)'\n    }\n  })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n  backgroundColor: string\n): 'black' | 'white' {\n  let hex = backgroundColor.replace('#', '')\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map(c => c + c)\n      .join('')\n  }\n\n  if (hex.length === 8) {\n    hex = hex.substring(0, 6)\n  }\n\n  if (hex.length !== 6) return 'black'\n\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n  return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    icon,\n    label,\n    color,\n    labelVariant,\n    checked = false,\n    disabled = false,\n    onChange\n  } = props\n\n  const iconColor = color ? getContrastingTextColor(color) : undefined\n\n  // Hooks\n  const { id } = useCheckbox()\n\n  const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n  return (\n    <div style={styles.container}>\n      <CheckboxRadix.Root\n        style={styles.root}\n        className={classes.root}\n        id={id}\n        tabIndex={0}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={checked => onChange(checked === true)}\n      >\n        <CheckboxRadix.Indicator style={styles.indicator}>\n          {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n        </CheckboxRadix.Indicator>\n      </CheckboxRadix.Root>\n\n      {label ? (\n        <Label\n          idFor={id}\n          label={label}\n          disabled={disabled}\n          labelVariant={labelVariant}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}

package/dist/{InfoSummary-BwrLkEfC.js → InfoSummary-Bsczs0X6.js}

@@ -146,7 +146,7 @@ const SummaryHighlight = ({ loading, highlightText, highlightIcon }) => {
 				variant: "b1",
 				lineHeight: "100%",
 				fontSize: "0.875rem",
-				fontWeight: "normal",
+				fontWeight: "regular",
 				isLoading: loading,
 				children: highlightText
 			})
@@ -248,4 +248,4 @@ const InfoSummary = ({ infos, loading }) => {
 
 //#endregion
 export { InfoSummary as t };
-//# sourceMappingURL=InfoSummary-BwrLkEfC.js.map
+//# sourceMappingURL=InfoSummary-Bsczs0X6.js.map

package/dist/{InfoSummary-BwrLkEfC.js.map → InfoSummary-Bsczs0X6.js.map}

@@ -1 +1 @@
-{"version":3,"file":"InfoSummary-BwrLkEfC.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      gap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n  title: string\n  icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n  const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n  return (\n    <header style={styles.container}>\n      {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          fontWeight=\"bold\"\n          lineHeight=\"100%\"\n          fontSize=\"0.75rem\"\n        >\n          {title}\n        </Typography>\n      </div>\n    </header>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '0.625rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyItems: 'start',\n\n      columnGap: '0.125rem'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'center',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b3\"\n          lineHeight=\"100%\"\n          isLoading={loading}\n          fontSize=\"0.625rem\"\n          color=\"var(--px-text-secondary)\"\n        >\n          {captionText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      columnGap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          lineHeight: '1'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  highlightText?: string\n  highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n  loading,\n  highlightText,\n  highlightIcon\n}) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n  return (\n    <div style={styles.container}>\n      {highlightIcon ? (\n        <div style={styles.iconContainer}>{highlightIcon}</div>\n      ) : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          lineHeight=\"100%\"\n          fontSize=\"0.875rem\"\n          fontWeight=\"normal\"\n          isLoading={loading}\n        >\n          {highlightText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n  return styled({\n    container: {\n      height: '100%',\n      borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n    },\n\n    content: {\n      minWidth: '8rem',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n\n      paddingBlock: '0.5rem',\n      paddingInline: '1rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n  return (\n    <li style={styles.container}>\n      <article style={styles.content}>\n        <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n        <SummaryHighlight\n          loading={props.loading}\n          highlightText={props.item.highlight}\n          highlightIcon={props.item.highlightIcon}\n        />\n\n        <SummaryCaption\n          loading={props.loading}\n          captionText={props.item.caption}\n        />\n      </article>\n    </li>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n  return styled({\n    section: {\n      height: '5.5rem',\n      minHeight: '5.5rem',\n\n      width: 'fit-content',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n\n      backgroundColor: 'var(--px-background-card-primary)',\n\n      borderRadius: '10px',\n      paddingBlock: 'var(--px-space-sm)'\n    },\n\n    summaryListContainer: {\n      width: '100%',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n  // Functions\n  function renderSummaryItems() {\n    return (\n      <ul style={styles.summaryListContainer}>\n        {infos.map((info, index) => (\n          <SummaryItem\n            item={info}\n            key={info.id}\n            loading={loading}\n            isLast={index === infos.length - 1}\n          />\n        ))}\n      </ul>\n    )\n  }\n\n  return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":"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"}
+{"version":3,"file":"InfoSummary-Bsczs0X6.js","names":["SummaryHeader: React.FC<Props>","SummaryCaption: React.FC<Props>","SummaryHighlight: React.FC<Props>","SummaryItem: React.FC<SummaryItemProps>","InfoSummary: React.FC<InfoSummaryProps>"],"sources":["../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHeader/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryCaption/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/components/SummaryHighlight/index.tsx","../src/components/toolkit/InfoSummary/components/SummaryItem/styles.ts","../src/components/toolkit/InfoSummary/components/SummaryItem/index.tsx","../src/components/toolkit/InfoSummary/styles.ts","../src/components/toolkit/InfoSummary/index.tsx"],"sourcesContent":["// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHeaderStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      gap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHeaderStyles } from './styles'\n\ninterface Props {\n  title: string\n  icon?: ReactNode\n}\n\nexport const SummaryHeader: React.FC<Props> = ({ icon, title }) => {\n  const { styles } = useThemedStyles({}, createSummaryHeaderStyles)\n\n  return (\n    <header style={styles.container}>\n      {icon ? <div style={styles.iconContainer}>{icon}</div> : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          fontWeight=\"bold\"\n          lineHeight=\"100%\"\n          fontSize=\"0.75rem\"\n        >\n          {title}\n        </Typography>\n      </div>\n    </header>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryCaptionStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '0.625rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'center',\n      justifyItems: 'start',\n\n      columnGap: '0.125rem'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'center',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryCaptionStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  captionText?: string\n}\n\nexport const SummaryCaption: React.FC<Props> = ({ loading, captionText }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryCaptionStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b3\"\n          lineHeight=\"100%\"\n          isLoading={loading}\n          fontSize=\"0.625rem\"\n          color=\"var(--px-text-secondary)\"\n        >\n          {captionText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryHighlightStyles(): StyleMap {\n  return styled({\n    container: {\n      width: '100%',\n      minHeight: '1rem',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-end',\n\n      columnGap: '0.125rem'\n    },\n\n    iconContainer: {\n      display: 'flex',\n      alignItems: 'flex-start'\n    },\n\n    textContainer: {\n      flex: '1',\n      maxWidth: '8rem',\n\n      display: 'flex',\n      alignItems: 'flex-start',\n\n      __rules: {\n        '& > p': {\n          whiteSpace: 'nowrap',\n          overflow: 'hidden',\n          textOverflow: 'ellipsis',\n          lineHeight: '1'\n        }\n      }\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\nimport type { ReactNode } from 'react'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Styles\nimport { createSummaryHighlightStyles } from './styles'\n\ninterface Props {\n  loading?: boolean\n  highlightText?: string\n  highlightIcon?: ReactNode\n}\n\nexport const SummaryHighlight: React.FC<Props> = ({\n  loading,\n  highlightText,\n  highlightIcon\n}) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createSummaryHighlightStyles)\n\n  return (\n    <div style={styles.container}>\n      {highlightIcon ? (\n        <div style={styles.iconContainer}>{highlightIcon}</div>\n      ) : null}\n\n      <div style={styles.textContainer}>\n        <Typography\n          variant=\"b1\"\n          lineHeight=\"100%\"\n          fontSize=\"0.875rem\"\n          fontWeight=\"regular\"\n          isLoading={loading}\n        >\n          {highlightText}\n        </Typography>\n      </div>\n    </div>\n  )\n}\n","// Types\nimport type { SummaryItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createSummaryItemStyles(props: SummaryItemProps): StyleMap {\n  return styled({\n    container: {\n      height: '100%',\n      borderRight: props.isLast ? 'none' : '2px solid var(--border-secondary)'\n    },\n\n    content: {\n      minWidth: '8rem',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'column',\n      justifyContent: 'space-between',\n\n      paddingBlock: '0.5rem',\n      paddingInline: '1rem'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryHeader } from './components/SummaryHeader'\nimport { SummaryCaption } from './components/SummaryCaption'\nimport { SummaryHighlight } from './components/SummaryHighlight'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { SummaryItemProps } from './types'\n\n// Styles\nimport { createSummaryItemStyles } from './styles'\n\nexport const SummaryItem: React.FC<SummaryItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createSummaryItemStyles)\n\n  return (\n    <li style={styles.container}>\n      <article style={styles.content}>\n        <SummaryHeader icon={props.item.titleIcon} title={props.item.title} />\n\n        <SummaryHighlight\n          loading={props.loading}\n          highlightText={props.item.highlight}\n          highlightIcon={props.item.highlightIcon}\n        />\n\n        <SummaryCaption\n          loading={props.loading}\n          captionText={props.item.caption}\n        />\n      </article>\n    </li>\n  )\n}\n","// Types\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createInfoSummaryStyles(): StyleMap {\n  return styled({\n    section: {\n      height: '5.5rem',\n      minHeight: '5.5rem',\n\n      width: 'fit-content',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start',\n\n      backgroundColor: 'var(--px-background-card-primary)',\n\n      borderRadius: '10px',\n      paddingBlock: 'var(--px-space-sm)'\n    },\n\n    summaryListContainer: {\n      width: '100%',\n      height: '100%',\n\n      display: 'flex',\n      flexDirection: 'row',\n      alignItems: 'flex-start'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { SummaryItem } from './components/SummaryItem'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { InfoSummaryProps } from './types'\n\n// Styles\nimport { createInfoSummaryStyles } from './styles'\n\nexport * from './types'\n\nexport const InfoSummary: React.FC<InfoSummaryProps> = ({ infos, loading }) => {\n  // Hooks\n  const { styles } = useThemedStyles({}, createInfoSummaryStyles)\n\n  // Functions\n  function renderSummaryItems() {\n    return (\n      <ul style={styles.summaryListContainer}>\n        {infos.map((info, index) => (\n          <SummaryItem\n            item={info}\n            key={info.id}\n            loading={loading}\n            isLast={index === infos.length - 1}\n          />\n        ))}\n      </ul>\n    )\n  }\n\n  return <section style={styles.section}>{renderSummaryItems()}</section>\n}\n"],"mappings":";;;;;AAGA,SAAgB,4BAAsC;AACpD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,WAAW;GAEX,SAAS;GACT,eAAe;GACf,YAAY;GAEZ,KAAK;GACN;EAED,eAAe;GACb,SAAS;GACT,YAAY;GACb;EAED,eAAe;GACb,MAAM;GACN,UAAU;GAEV,SAAS;GACT,YAAY;GAEZ,SAAS,EACP,SAAS;IACP,YAAY;IACZ,UAAU;IACV,cAAc;IACf,EACF;GACF;EACF,CAAC;;;;;AClBJ,MAAaA,iBAAkC,EAAE,MAAM,YAAY;CACjE,MAAM,EAAE,WAAW,gBAAgB,EAAE,EAAE,0BAA0B;AAEjE,QACE,qBAAC;EAAO,OAAO,OAAO;aACnB,OAAO,oBAAC;GAAI,OAAO,OAAO;aAAgB;IAAW,GAAG,MAEzD,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IACC,SAAQ;IACR,YAAW;IACX,YAAW;IACX,UAAS;cAER;KACU;IACT;GACC;;;;;AChCb,SAAgB,6BAAuC;AACrD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,WAAW;GAEX,SAAS;GACT,eAAe;GACf,YAAY;GACZ,cAAc;GAEd,WAAW;GACZ;EAED,eAAe;GACb,MAAM;GACN,UAAU;GAEV,SAAS;GACT,YAAY;GAEZ,SAAS,EACP,SAAS;IACP,YAAY;IACZ,UAAU;IACV,cAAc;IACf,EACF;GACF;EACF,CAAC;;;;;ACfJ,MAAaC,kBAAmC,EAAE,SAAS,kBAAkB;CAE3E,MAAM,EAAE,WAAW,gBAAgB,EAAE,EAAE,2BAA2B;AAElE,QACE,oBAAC;EAAI,OAAO,OAAO;YACjB,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IACC,SAAQ;IACR,YAAW;IACX,WAAW;IACX,UAAS;IACT,OAAM;cAEL;KACU;IACT;GACF;;;;;AC/BV,SAAgB,+BAAyC;AACvD,QAAO,OAAO;EACZ,WAAW;GACT,OAAO;GACP,WAAW;GAEX,SAAS;GACT,eAAe;GACf,YAAY;GAEZ,WAAW;GACZ;EAED,eAAe;GACb,SAAS;GACT,YAAY;GACb;EAED,eAAe;GACb,MAAM;GACN,UAAU;GAEV,SAAS;GACT,YAAY;GAEZ,SAAS,EACP,SAAS;IACP,YAAY;IACZ,UAAU;IACV,cAAc;IACd,YAAY;IACb,EACF;GACF;EACF,CAAC;;;;;AClBJ,MAAaC,oBAAqC,EAChD,SACA,eACA,oBACI;CAEJ,MAAM,EAAE,WAAW,gBAAgB,EAAE,EAAE,6BAA6B;AAEpE,QACE,qBAAC;EAAI,OAAO,OAAO;aAChB,gBACC,oBAAC;GAAI,OAAO,OAAO;aAAgB;IAAoB,GACrD,MAEJ,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IACC,SAAQ;IACR,YAAW;IACX,UAAS;IACT,YAAW;IACX,WAAW;cAEV;KACU;IACT;GACF;;;;;ACxCV,SAAgB,wBAAwB,OAAmC;AACzE,QAAO,OAAO;EACZ,WAAW;GACT,QAAQ;GACR,aAAa,MAAM,SAAS,SAAS;GACtC;EAED,SAAS;GACP,UAAU;GACV,QAAQ;GAER,SAAS;GACT,eAAe;GACf,gBAAgB;GAEhB,cAAc;GACd,eAAe;GAChB;EACF,CAAC;;;;;ACLJ,MAAaC,eAA0C,UAAS;CAE9D,MAAM,EAAE,WAAW,gBAAgB,OAAO,wBAAwB;AAElE,QACE,oBAAC;EAAG,OAAO,OAAO;YAChB,qBAAC;GAAQ,OAAO,OAAO;;IACrB,oBAAC;KAAc,MAAM,MAAM,KAAK;KAAW,OAAO,MAAM,KAAK;MAAS;IAEtE,oBAAC;KACC,SAAS,MAAM;KACf,eAAe,MAAM,KAAK;KAC1B,eAAe,MAAM,KAAK;MAC1B;IAEF,oBAAC;KACC,SAAS,MAAM;KACf,aAAa,MAAM,KAAK;MACxB;;IACM;GACP;;;;;AClCT,SAAgB,0BAAoC;AAClD,QAAO,OAAO;EACZ,SAAS;GACP,QAAQ;GACR,WAAW;GAEX,OAAO;GAEP,SAAS;GACT,eAAe;GACf,YAAY;GAEZ,iBAAiB;GAEjB,cAAc;GACd,cAAc;GACf;EAED,sBAAsB;GACpB,OAAO;GACP,QAAQ;GAER,SAAS;GACT,eAAe;GACf,YAAY;GACb;EACF,CAAC;;;;;ACZJ,MAAaC,eAA2C,EAAE,OAAO,cAAc;CAE7E,MAAM,EAAE,WAAW,gBAAgB,EAAE,EAAE,wBAAwB;CAG/D,SAAS,qBAAqB;AAC5B,SACE,oBAAC;GAAG,OAAO,OAAO;aACf,MAAM,KAAK,MAAM,UAChB,oBAAC;IACC,MAAM;IAEG;IACT,QAAQ,UAAU,MAAM,SAAS;MAF5B,KAAK,GAGV,CACF;IACC;;AAIT,QAAO,oBAAC;EAAQ,OAAO,OAAO;YAAU,oBAAoB;GAAW"}

package/dist/checkbox.d.ts

@@ -1,3 +1,3 @@
 import "./types-CDUx-y9q.js";
-import { t as Checkbox } from "./index-DH2bD-Yj.js";
+import { t as Checkbox } from "./index-C9iMLJTU.js";
 export { Checkbox };

package/dist/checkbox.js

@@ -1,6 +1,6 @@
 import "./Icon-Cv0qztmq.js";
 import "./useThemedStyles-3rUXJYgS.js";
 import "./Typography-BE-vQSfx.js";
-import { t as Checkbox } from "./Checkbox-DE2wp1rK.js";
+import { t as Checkbox } from "./Checkbox-6ivVbzcX.js";
 
 export { Checkbox };

package/dist/{index-DH2bD-Yj.d.ts → index-C9iMLJTU.d.ts}

@@ -1,6 +1,5 @@
 import { n as TypographyVariant } from "./types-CDUx-y9q.js";
 import React$1 from "react";
-import { ChecklistAlertResponse } from "@api/checklist/alerts/dtos";
 
 //#region src/components/toolkit/Checkbox/types.d.ts
 type CheckboxSize = 'sm' | 'md' | 'lg';
@@ -16,7 +15,6 @@ interface CheckboxProps {
   radius?: CheckboxRadius;
   checked?: boolean;
   disabled?: boolean;
-  alert?: ChecklistAlertResponse;
   labelVariant?: LabelVariant;
   labelPlacement?: LabelPlacement;
   labelLineThrough?: boolean;
@@ -28,4 +26,4 @@ interface CheckboxProps {
 declare const Checkbox: React$1.FC<CheckboxProps>;
 //#endregion
 export { Checkbox as t };
-//# sourceMappingURL=index-DH2bD-Yj.d.ts.map
+//# sourceMappingURL=index-C9iMLJTU.d.ts.map

package/dist/{index-CncL-rgW.d.ts → index-DUrGjyKy.d.ts}

@@ -1,7 +1,7 @@
 import { t as CommonStyleProps } from "./styleProps-D405c8KF.js";
 import { n as StyleMap } from "./useThemedStyles-B7irjShy.js";
 import { ReactNode } from "react";
-import * as react_jsx_runtime0 from "react/jsx-runtime";
+import * as react_jsx_runtime1 from "react/jsx-runtime";
 
 //#region src/components/toolkit/TabSwitch/styles.d.ts
 declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): StyleMap;
@@ -27,7 +27,7 @@ interface TabSwitchProps<T> extends CommonStyleProps {
 }
 //#endregion
 //#region src/components/toolkit/TabSwitch/index.d.ts
-declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime0.JSX.Element;
+declare const TabSwitch: <T>(props: TabSwitchProps<T>) => react_jsx_runtime1.JSX.Element;
 //#endregion
 export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
-//# sourceMappingURL=index-CncL-rgW.d.ts.map
+//# sourceMappingURL=index-DUrGjyKy.d.ts.map

package/dist/index.d.ts

@@ -4,9 +4,9 @@ import { t as IconButton } from "./index-CyvtOmP2.js";
 import { t as Input } from "./index-pnnP9M22.js";
 import { t as TextArea } from "./index-BspBF3Mv.js";
 import { t as CheckItem } from "./index-akSk71wZ.js";
-import { t as Checkbox } from "./index-DH2bD-Yj.js";
+import { t as Checkbox } from "./index-C9iMLJTU.js";
 import { InfoSummary, InfoSummaryItem, InfoSummaryProps } from "./info-summary.js";
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CncL-rgW.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
 import { Typography } from "./typography.js";
 import { a as ThemeName, c as ThemeRegistry, i as ThemeMode, l as ThemeTokens, n as useTheme, o as ThemePersistence, r as ThemeContextData, s as ThemeProviderProps, t as ThemeProvider } from "./index-CIxyqe-m.js";
 export { Button, CheckItem, Checkbox, IconButton, InfoSummary, InfoSummaryItem, InfoSummaryProps, Input, SwitchOption, TabSwitch, TabSwitchProps, TextArea, ThemeContextData, ThemeMode, ThemeName, ThemePersistence, ThemeProvider, ThemeProviderProps, ThemeRegistry, ThemeTokens, Typography, useTheme };

package/dist/index.js

@@ -1,10 +1,10 @@
 import "./Icon-Cv0qztmq.js";
 import "./useThemedStyles-3rUXJYgS.js";
 import { t as Typography } from "./Typography-BE-vQSfx.js";
-import { t as Checkbox } from "./Checkbox-DE2wp1rK.js";
+import { t as Checkbox } from "./Checkbox-6ivVbzcX.js";
 import { n as useTheme, t as ThemeProvider } from "./ThemeContext-Dro_peJg.js";
 import { t as TabSwitch } from "./TabSwitch-De30bFX2.js";
-import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
+import { t as InfoSummary } from "./InfoSummary-Bsczs0X6.js";
 import { t as CheckItem } from "./CheckItem-DsIiS-2X.js";
 import { t as Button } from "./Button-BiSdxI2A.js";
 import { t as IconButton } from "./IconButton-BBdkzg3b.js";

package/dist/info-summary.js

@@ -1,5 +1,5 @@
 import "./useThemedStyles-3rUXJYgS.js";
 import "./Typography-BE-vQSfx.js";
-import { t as InfoSummary } from "./InfoSummary-BwrLkEfC.js";
+import { t as InfoSummary } from "./InfoSummary-Bsczs0X6.js";
 
 export { InfoSummary };

package/dist/tab-switch.d.ts

@@ -1,2 +1,2 @@
-import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-CncL-rgW.js";
+import { n as SwitchOption, r as TabSwitchProps, t as TabSwitch } from "./index-DUrGjyKy.js";
 export { SwitchOption, TabSwitch, TabSwitchProps };

package/dist/typography.d.ts

@@ -1,8 +1,8 @@
 import { t as TypographyProps } from "./types-CDUx-y9q.js";
-import * as react_jsx_runtime1 from "react/jsx-runtime";
+import * as react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/toolkit/Typography/index.d.ts
-declare function Typography(props: TypographyProps): react_jsx_runtime1.JSX.Element;
+declare function Typography(props: TypographyProps): react_jsx_runtime0.JSX.Element;
 //#endregion
 export { Typography };
 //# sourceMappingURL=typography.d.ts.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "softable-pixels-web",
-  "version": "1.1.5",
+  "version": "1.1.6",
   "description": "",
   "keywords": [],
   "author": "softable",
@@ -16,6 +16,8 @@
   ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "dev": "tsc -p tsconfig.json --watch",
+    "build:w": "pnpm build --watch",
     "build": "npm run generate:icons:node && rm -rf dist && tsdown",
     "generate:icons": "chmod +x ./scripts/generate-icons.sh && ./scripts/generate-icons.sh",
     "generate:icons:node": "node ./scripts/generate-icons.mjs"
@@ -79,6 +81,7 @@
   "devDependencies": {
     "@biomejs/biome": "2.0.6",
     "@svgr/cli": "^8.1.0",
+    "radix-ui": "^1.4.3",
     "@svgr/webpack": "^8.1.0",
     "@types/node": "^18.18.3",
     "@types/react": "^19.2.7",

package/dist/Checkbox-DE2wp1rK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Checkbox-DE2wp1rK.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/toolkit/Checkbox/components/Label/styles.ts","../src/components/toolkit/Checkbox/components/Label/index.tsx","../src/components/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/toolkit/Checkbox/index.tsx"],"sourcesContent":["// Types\nimport type { LabelProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createLabelStyles(props: LabelProps): StyleMap {\n  const { disabled } = props\n\n  return styled({\n    container: {\n      userSelect: 'none',\n      opacity: disabled ? 0.6 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      transition: 'all 200ms',\n\n      __rules: {\n        ':hover': { color: 'var(--px-color-secondary)' }\n      }\n    }\n  })\n}\n","// External libraries\nimport { Label as LabelRadix } from 'radix-ui'\n\n// Components\nimport { Typography } from '@components/toolkit/Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { LabelProps } from './types'\n\n// Styles\nimport { createLabelStyles } from './styles'\n\nexport const Label: React.FC<LabelProps> = props => {\n  const { idFor, label, labelVariant } = props\n\n  // Hooks\n  const { styles } = useThemedStyles(props, createLabelStyles, {\n    pick: p => [p.disabled, p.labelVariant, p.label],\n    applyCommonProps: true\n  })\n\n  return (\n    <LabelRadix.Root htmlFor={idFor} style={styles.container}>\n      <Typography variant={labelVariant ?? 'b1'} fontWeight=\"normal\">\n        {label}\n      </Typography>\n    </LabelRadix.Root>\n  )\n}\n","// External libraries\nimport { useId } from 'react'\n\nexport function useCheckbox() {\n  return {\n    id: useId()\n  }\n}\n","// Types\nimport type { CheckboxProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport const CHECKBOX_STYLES: Record<string, StyleMap> = {\n  size: {\n    sm: { width: '1rem', height: '1rem' },\n    md: { width: '1.25rem', height: '1.25rem' },\n    lg: { width: '1.5rem', height: '1.5rem' }\n  },\n  radius: {\n    none: { borderRadius: 0 },\n    sm: { borderRadius: '0.25rem' },\n    md: { borderRadius: '0.375rem' },\n    lg: { borderRadius: '0.5rem' },\n    full: { borderRadius: '100%' }\n  }\n}\n\nexport function createCheckBoxStyles(props: CheckboxProps): StyleMap {\n  const {\n    color,\n    checked,\n    size = 'md',\n    radius = 'md',\n    disabled = false,\n    labelPlacement = 'right'\n  } = props\n\n  const focusIndicatorOffsetColor = '#fff'\n\n  return styled({\n    container: {\n      display: 'flex',\n      columnGap: '0.5rem',\n      alignItems: 'center',\n      '--px-ring-color': color ?? undefined,\n      flexDirection: labelPlacement === 'right' ? 'row' : 'row-reverse'\n    },\n\n    root: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked ? color : 'white',\n      borderWidth: '1px',\n      borderStyle: 'solid',\n      borderColor: checked ? color : 'var(--px-border-primary, #e5e7eb)',\n\n      transition: 'color 200ms',\n      opacity: disabled ? 0.5 : 1,\n      cursor: disabled ? 'not-allowed' : 'pointer',\n\n      ...CHECKBOX_STYLES.size[size],\n      ...CHECKBOX_STYLES.radius[radius],\n\n      __rules: {\n        '&:hover': { borderColor: 'var(--px-border-secondary, #e5e7eb)' },\n        '&:focus-visible': {\n          outline: 'none',\n          boxShadow: `0 0 0 2px ${focusIndicatorOffsetColor}, 0 0 0 4px var(--px-ring-color, #2b2b2bff)`\n        }\n      }\n    },\n\n    indicator: {\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n      color: 'var(--px-text-primary, #4b5563)'\n    }\n  })\n}\n","/**\n * Returns the contrasting text color for a given background color.\n * @param backgroundColor hexadecimal color (i.e.: \"#ffffff\", \"#000\", \"#ffcc00\")\n */\nexport function getContrastingTextColor(\n  backgroundColor: string\n): 'black' | 'white' {\n  let hex = backgroundColor.replace('#', '')\n\n  if (hex.length === 3) {\n    hex = hex\n      .split('')\n      .map(c => c + c)\n      .join('')\n  }\n\n  if (hex.length === 8) {\n    hex = hex.substring(0, 6)\n  }\n\n  if (hex.length !== 6) return 'black'\n\n  const r = parseInt(hex.substring(0, 2), 16)\n  const g = parseInt(hex.substring(2, 4), 16)\n  const b = parseInt(hex.substring(4, 6), 16)\n\n  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255\n\n  return luminance > 0.6 ? 'black' : 'white'\n}\n","// External Libraries\nimport type React from 'react'\nimport { Checkbox as CheckboxRadix } from 'radix-ui'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Label } from './components/Label'\n\n// Hooks\nimport { useCheckbox } from './hooks/useCheckbox'\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckboxProps } from './types'\n\n// Styles\nimport { createCheckBoxStyles } from './styles'\nimport { getContrastingTextColor } from '@utils/functions'\n\nexport const Checkbox: React.FC<CheckboxProps> = props => {\n  const {\n    icon,\n    label,\n    color,\n    labelVariant,\n    checked = false,\n    disabled = false,\n    onChange\n  } = props\n\n  const iconColor = color ? getContrastingTextColor(color) : undefined\n\n  // Hooks\n  const { id } = useCheckbox()\n\n  const { styles, classes } = useThemedStyles(props, createCheckBoxStyles)\n\n  return (\n    <div style={styles.container}>\n      <CheckboxRadix.Root\n        style={styles.root}\n        className={classes.root}\n        id={id}\n        tabIndex={0}\n        checked={checked}\n        disabled={disabled}\n        onCheckedChange={checked => onChange(checked === true)}\n      >\n        <CheckboxRadix.Indicator style={styles.indicator}>\n          {icon ?? <Icon name=\"general-check\" size=\"sm\" color={iconColor} />}\n        </CheckboxRadix.Indicator>\n      </CheckboxRadix.Root>\n\n      {label ? (\n        <Label\n          idFor={id}\n          label={label}\n          disabled={disabled}\n          labelVariant={labelVariant}\n        />\n      ) : null}\n    </div>\n  )\n}\n"],"mappings":"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"}