softable-pixels-web 1.2.16 → 1.2.17

package/dist/{CheckItem-DzRbPRpC.js → CheckItem-BXv4Qpcs.js}

@@ -1,5 +1,5 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-B1E0m8Ih.js";
-import { t as Icon } from "./Icon-Ded27Khw.js";
+import { t as Icon } from "./Icon-Cs9B-aOe.js";
 import { t as Typography } from "./Typography-DOmGYHd6.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 
@@ -45,4 +45,4 @@ const CheckItem = (props) => {
 
 //#endregion
 export { CheckItem as t };
-//# sourceMappingURL=CheckItem-DzRbPRpC.js.map
+//# sourceMappingURL=CheckItem-BXv4Qpcs.js.map

package/dist/{CheckItem-DzRbPRpC.js.map → CheckItem-BXv4Qpcs.js.map}

@@ -1 +1 @@
-{"version":3,"file":"CheckItem-DzRbPRpC.js","names":["CheckItem: React.FC<CheckItemProps>"],"sources":["../src/components/commons/toolkit/CheckItem/styles.ts","../src/components/commons/toolkit/CheckItem/index.tsx"],"sourcesContent":["// Types\nimport type { CheckItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createCheckItemStyles({ checked }: CheckItemProps): StyleMap {\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      columnGap: 'var(--px-space-sm)'\n    },\n\n    iconContainer: {\n      width: '20px',\n      height: '20px',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked\n        ? 'var(--px-color-success)'\n        : 'var(--px-color-disabled)',\n\n      borderRadius: '50%'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckItemProps } from './types'\n\n// Styles\nimport { createCheckItemStyles } from './styles'\n\nexport const CheckItem: React.FC<CheckItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createCheckItemStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.iconContainer}>\n        <Icon name=\"general-check\" color=\"white\" size=\"sm\" />\n      </div>\n\n      <Typography variant=\"b2\">{props.label}</Typography>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAIA,SAAgB,sBAAsB,EAAE,WAAqC;AAC3E,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EAED,eAAe;GACb,OAAO;GACP,QAAQ;GAER,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UACb,4BACA;GAEJ,cAAc;GACf;EACF,CAAC;;;;;ACVJ,MAAaA,aAAsC,UAAS;CAE1D,MAAM,EAAE,WAAW,gBAAgB,OAAO,sBAAsB;AAEhE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IAAK,MAAK;IAAgB,OAAM;IAAQ,MAAK;KAAO;IACjD,EAEN,oBAAC;GAAW,SAAQ;aAAM,MAAM;IAAmB;GAC/C"}
+{"version":3,"file":"CheckItem-BXv4Qpcs.js","names":["CheckItem: React.FC<CheckItemProps>"],"sources":["../src/components/commons/toolkit/CheckItem/styles.ts","../src/components/commons/toolkit/CheckItem/index.tsx"],"sourcesContent":["// Types\nimport type { CheckItemProps } from './types'\nimport { styled, type StyleMap } from '@hooks/useThemedStyles/types'\n\nexport function createCheckItemStyles({ checked }: CheckItemProps): StyleMap {\n  return styled({\n    container: {\n      display: 'flex',\n      flexDirection: 'row',\n      columnGap: 'var(--px-space-sm)'\n    },\n\n    iconContainer: {\n      width: '20px',\n      height: '20px',\n\n      display: 'flex',\n      alignItems: 'center',\n      justifyContent: 'center',\n\n      backgroundColor: checked\n        ? 'var(--px-color-success)'\n        : 'var(--px-color-disabled)',\n\n      borderRadius: '50%'\n    }\n  })\n}\n","// External Libraries\nimport type React from 'react'\n\n// Components\nimport { Icon } from '../Icon'\nimport { Typography } from '../Typography'\n\n// Hooks\nimport { useThemedStyles } from '@hooks/useThemedStyles'\n\n// Types\nimport type { CheckItemProps } from './types'\n\n// Styles\nimport { createCheckItemStyles } from './styles'\n\nexport const CheckItem: React.FC<CheckItemProps> = props => {\n  // Hooks\n  const { styles } = useThemedStyles(props, createCheckItemStyles)\n\n  return (\n    <div style={styles.container}>\n      <div style={styles.iconContainer}>\n        <Icon name=\"general-check\" color=\"white\" size=\"sm\" />\n      </div>\n\n      <Typography variant=\"b2\">{props.label}</Typography>\n    </div>\n  )\n}\n"],"mappings":";;;;;;AAIA,SAAgB,sBAAsB,EAAE,WAAqC;AAC3E,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,eAAe;GACf,WAAW;GACZ;EAED,eAAe;GACb,OAAO;GACP,QAAQ;GAER,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UACb,4BACA;GAEJ,cAAc;GACf;EACF,CAAC;;;;;ACVJ,MAAaA,aAAsC,UAAS;CAE1D,MAAM,EAAE,WAAW,gBAAgB,OAAO,sBAAsB;AAEhE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAAC;GAAI,OAAO,OAAO;aACjB,oBAAC;IAAK,MAAK;IAAgB,OAAM;IAAQ,MAAK;KAAO;IACjD,EAEN,oBAAC;GAAW,SAAQ;aAAM,MAAM;IAAmB;GAC/C"}

package/dist/{Checkbox-Dn8CtTOP.js → Checkbox-GoqzLGQ0.js}

@@ -1,5 +1,5 @@
 import { n as styled, t as useThemedStyles } from "./useThemedStyles-B1E0m8Ih.js";
-import { t as Icon } from "./Icon-Ded27Khw.js";
+import { t as Icon } from "./Icon-Cs9B-aOe.js";
 import { t as Typography } from "./Typography-DOmGYHd6.js";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -165,4 +165,4 @@ const Checkbox$1 = (props) => {
 
 //#endregion
 export { Checkbox$1 as t };
-//# sourceMappingURL=Checkbox-Dn8CtTOP.js.map
+//# sourceMappingURL=Checkbox-GoqzLGQ0.js.map

package/dist/{Checkbox-Dn8CtTOP.js.map → Checkbox-GoqzLGQ0.js.map}

@@ -1 +1 @@
-{"version":3,"file":"Checkbox-Dn8CtTOP.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/commons/toolkit/Checkbox/components/Label/styles.ts","../src/components/commons/toolkit/Checkbox/components/Label/index.tsx","../src/components/commons/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/commons/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/commons/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/commons/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) {\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] as any),\n      ...(CHECKBOX_STYLES.radius[radius] as any),\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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"}
+{"version":3,"file":"Checkbox-GoqzLGQ0.js","names":["Label: React.FC<LabelProps>","LabelRadix","CHECKBOX_STYLES: Record<string, StyleMap>","Checkbox: React.FC<CheckboxProps>","CheckboxRadix","checked","Label"],"sources":["../src/components/commons/toolkit/Checkbox/components/Label/styles.ts","../src/components/commons/toolkit/Checkbox/components/Label/index.tsx","../src/components/commons/toolkit/Checkbox/hooks/useCheckbox.ts","../src/components/commons/toolkit/Checkbox/styles.ts","../src/utils/functions/getContrastingTextColor.ts","../src/components/commons/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/commons/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) {\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] as any),\n      ...(CHECKBOX_STYLES.radius[radius] as any),\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":";;;;;;;;AAIA,SAAgB,kBAAkB,OAA6B;CAC7D,MAAM,EAAE,aAAa;AAErB,QAAO,OAAO,EACZ,WAAW;EACT,YAAY;EACZ,SAAS,WAAW,KAAM;EAC1B,QAAQ,WAAW,gBAAgB;EAEnC,YAAY;EAEZ,SAAS,EACP,UAAU,EAAE,OAAO,6BAA6B,EACjD;EACF,EACF,CAAC;;;;;ACJJ,MAAaA,WAA8B,UAAS;CAClD,MAAM,EAAE,OAAO,OAAO,iBAAiB;CAGvC,MAAM,EAAE,WAAW,gBAAgB,OAAO,mBAAmB;EAC3D,OAAM,MAAK;GAAC,EAAE;GAAU,EAAE;GAAc,EAAE;GAAM;EAChD,kBAAkB;EACnB,CAAC;AAEF,QACE,oBAACC,MAAW;EAAK,SAAS;EAAO,OAAO,OAAO;YAC7C,oBAAC;GAAW,SAAS,gBAAgB;GAAM,YAAW;aACnD;IACU;GACG;;;;;AC1BtB,SAAgB,cAAc;AAC5B,QAAO,EACL,IAAI,OAAO,EACZ;;;;;ACFH,MAAaC,kBAA4C;CACvD,MAAM;EACJ,IAAI;GAAE,OAAO;GAAQ,QAAQ;GAAQ;EACrC,IAAI;GAAE,OAAO;GAAW,QAAQ;GAAW;EAC3C,IAAI;GAAE,OAAO;GAAU,QAAQ;GAAU;EAC1C;CACD,QAAQ;EACN,MAAM,EAAE,cAAc,GAAG;EACzB,IAAI,EAAE,cAAc,WAAW;EAC/B,IAAI,EAAE,cAAc,YAAY;EAChC,IAAI,EAAE,cAAc,UAAU;EAC9B,MAAM,EAAE,cAAc,QAAQ;EAC/B;CACF;AAED,SAAgB,qBAAqB,OAAsB;CACzD,MAAM,EACJ,OACA,SACA,OAAO,MACP,SAAS,MACT,WAAW,OACX,iBAAiB,YACf;CAEJ,MAAM,4BAA4B;AAElC,QAAO,OAAO;EACZ,WAAW;GACT,SAAS;GACT,WAAW;GACX,YAAY;GACZ,mBAAmB,SAAS;GAC5B,eAAe,mBAAmB,UAAU,QAAQ;GACrD;EAED,MAAM;GACJ,SAAS;GACT,YAAY;GACZ,gBAAgB;GAEhB,iBAAiB,UAAU,QAAQ;GACnC,aAAa;GACb,aAAa;GACb,aAAa,UAAU,QAAQ;GAE/B,YAAY;GACZ,SAAS,WAAW,KAAM;GAC1B,QAAQ,WAAW,gBAAgB;GAEnC,GAAI,gBAAgB,KAAK;GACzB,GAAI,gBAAgB,OAAO;GAE3B,SAAS;IACP,WAAW,EAAE,aAAa,uCAAuC;IACjE,mBAAmB;KACjB,SAAS;KACT,WAAW,aAAa,0BAA0B;KACnD;IACF;GACF;EAED,WAAW;GACT,SAAS;GACT,YAAY;GACZ,gBAAgB;GAChB,OAAO;GACR;EACF,CAAC;;;;;;;;;ACpEJ,SAAgB,wBACd,iBACmB;CACnB,IAAI,MAAM,gBAAgB,QAAQ,KAAK,GAAG;AAE1C,KAAI,IAAI,WAAW,EACjB,OAAM,IACH,MAAM,GAAG,CACT,KAAI,MAAK,IAAI,EAAE,CACf,KAAK,GAAG;AAGb,KAAI,IAAI,WAAW,EACjB,OAAM,IAAI,UAAU,GAAG,EAAE;AAG3B,KAAI,IAAI,WAAW,EAAG,QAAO;CAE7B,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;CAC3C,MAAM,IAAI,SAAS,IAAI,UAAU,GAAG,EAAE,EAAE,GAAG;AAI3C,SAFmB,OAAQ,IAAI,OAAQ,IAAI,OAAQ,KAAK,MAErC,KAAM,UAAU;;;;;ACTrC,MAAaC,cAAoC,UAAS;CACxD,MAAM,EACJ,MACA,OACA,OACA,cACA,UAAU,OACV,WAAW,OACX,aACE;CAEJ,MAAM,YAAY,QAAQ,wBAAwB,MAAM,GAAG;CAG3D,MAAM,EAAE,OAAO,aAAa;CAE5B,MAAM,EAAE,QAAQ,YAAY,gBAAgB,OAAO,qBAAqB;AAExE,QACE,qBAAC;EAAI,OAAO,OAAO;aACjB,oBAACC,SAAc;GACb,OAAO,OAAO;GACd,WAAW,QAAQ;GACf;GACJ,UAAU;GACD;GACC;GACV,kBAAiB,cAAW,SAASC,cAAY,KAAK;aAEtD,oBAACD,SAAc;IAAU,OAAO,OAAO;cACpC,QAAQ,oBAAC;KAAK,MAAK;KAAgB,MAAK;KAAK,OAAO;MAAa;KAC1C;IACP,EAEpB,QACC,oBAACE;GACC,OAAO;GACA;GACG;GACI;IACd,GACA;GACA"}