@mrshmllw/smores-react 14.1.1 → 14.3.0

package/dist/Tag/Tag.spec.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { render, screen } from '../testUtils'\nimport { it, expect } from 'vitest'\nimport { Tag } from '../Tag'\nimport { TagProps } from './Tag'\n\ndescribe('Tag Component', () => {\n  it('renders snapshot test correctly', () => {\n    const { container } = render(\n      <Tag\n        label=\"Snapshot Test Tag\"\n        color=\"color.illustration.neutral.400\"\n        bgColor=\"extended1.20\"\n      />,\n    )\n    expect(container).toMatchSnapshot()\n  })\n\n  describe('old colour name', () => {\n    testCases.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n  describe('new colour name', () => {\n    testCasesWithNewColourNames.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n})\n\nconst testCases = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'apple',\n      bgColor: 'chia',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flag',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'apple',\n      bgColor: 'chia',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n\nconst testCasesWithNewColourNames = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flag',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n"]}
+{"version":3,"file":"Tag.spec.js","sourceRoot":"","sources":["../../src/Tag/Tag.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { render, screen } from '../testUtils'\nimport { it, expect } from 'vitest'\nimport { Tag } from '../Tag'\nimport { TagProps } from './Tag'\n\nconst CustomIcon = () => <span data-testid=\"tag-custom-icon\" />\n\ndescribe('Tag Component', () => {\n  it('renders snapshot test correctly', () => {\n    const { container } = render(\n      <Tag\n        label=\"Snapshot Test Tag\"\n        color=\"color.illustration.neutral.400\"\n        bgColor=\"extended1.20\"\n      />,\n    )\n    expect(container).toMatchSnapshot()\n  })\n\n  describe('old colour name', () => {\n    testCases.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n  describe('new colour name', () => {\n    testCasesWithNewColourNames.forEach(({ description, props }) => {\n      test(description, () => {\n        const { container } = render(<Tag {...props} />)\n\n        expect(screen.getByText(props.label)).toBeInTheDocument()\n\n        if (props.icon) {\n          const iconElement = screen.getByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).toBeInTheDocument()\n        } else {\n          const iconElement = screen.queryByTestId(`tag-icon-${props.icon}`)\n          expect(iconElement).not.toBeInTheDocument()\n        }\n\n        expect(container.firstChild).toHaveStyle('backgroundColor: #d2d2d2')\n      })\n    })\n  })\n\n  it('renders a custom icon component when provided', () => {\n    render(\n      <Tag\n        label=\"Tag with Custom Icon\"\n        color=\"apple\"\n        bgColor=\"chia\"\n        icon=\"flag\"\n        iconComponent={<CustomIcon />}\n      />,\n    )\n\n    expect(screen.getByTestId('tag-custom-icon')).toBeInTheDocument()\n    expect(screen.queryByTestId('tag-icon-flag')).not.toBeInTheDocument()\n  })\n\n  it('renders without an icon when none is provided', () => {\n    const { container } = render(\n      <Tag label=\"Tag without Icon\" color=\"apple\" bgColor=\"chia\" />,\n    )\n\n    expect(container.querySelector('[data-testid$=\"-icon\"]')).toBeNull()\n  })\n})\n\nconst testCases = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'apple',\n      bgColor: 'chia',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flag',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'apple',\n      bgColor: 'chia',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'apple',\n      bgColor: 'chia',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n\nconst testCasesWithNewColourNames = [\n  {\n    description: 'Renders Tag with label Test Tag 0001',\n    props: {\n      label: 'Test Tag 0001',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n    } as TagProps,\n  },\n  {\n    description: 'Renders Tag with label Test Tag 0002 and flag icon',\n    props: {\n      label: 'Test Tag 0002',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flag',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0003 and no icon if iconColor: color.illustration.accent2.200, icon: undefined',\n    props: {\n      label: 'Test Tag 0003',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      iconColor: 'color.illustration.accent2.200',\n    } as TagProps,\n  },\n  {\n    description:\n      'Renders Tag with label Test Tag 0004 and icon with default color if iconColor: undefined',\n    props: {\n      label: 'Test Tag 0004',\n      color: 'color.feedback.positive.200',\n      bgColor: 'color.feedback.inactive.100',\n      icon: 'flagFilled',\n    } as TagProps,\n  },\n]\n"]}

package/dist/TextInput/TextInput.js

@@ -2,8 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, } from 'react';
 import { Box } from '../Box';
 import { Field } from '../fields/Field';
-import { Input, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
+import { Input, InputLeadingIconContainer, StyledFrontIcon, StyledTrailingIcon, } from '../fields/components/CommonInput';
 import { useUniqueId } from '../utils/id';
+import { useTheme } from 'styled-components';
 /**
  * A reusable TextInput component that supports various input types, custom styling, icons,
  * and autofill detection.
@@ -12,16 +13,19 @@ import { useUniqueId } from '../utils/id';
  * - `onAutoFill` triggers after animation end (animation duration is 2s),
  * the animation starts when a user selects or hovers over an autofill option
  */
-export const TextInput = forwardRef(function TextInput({ id: idProp, type = 'text', placeholder, name, value, error = false, onBlur, onChange, onInputChange, onAutoFill, disabled = false, frontIcon, trailingIcon, fallbackStyle, autoCompleteAttr = 'off', inputModeAttr, ...fieldProps }, ref) {
+export const TextInput = forwardRef(function TextInput({ id: idProp, type = 'text', placeholder, name, value, error = false, onBlur, onChange, onInputChange, onAutoFill, disabled = false, frontIcon, frontIconComponent, trailingIconComponent, trailingIcon, fallbackStyle, autoCompleteAttr = 'off', inputModeAttr, ...fieldProps }, ref) {
     const id = useUniqueId(idProp);
+    const theme = useTheme();
     const handleAnimationEnd = (e) => {
         if (e.animationName === 'onAutoFillStart' && onAutoFill && !!value) {
             onAutoFill();
         }
     };
-    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [frontIcon && (_jsx(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "sesame" })), _jsx(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, onAnimationEnd: handleAnimationEnd, placeholder: placeholder, value: value, "$error": error, "$frontIcon": frontIcon, "$fallbackStyle": fallbackStyle, autoComplete: autoCompleteAttr, onChange: (e) => {
+    const frontIconToRender = frontIconComponent ? (_jsx(InputLeadingIconContainer, { "$size": 20, "$iconColor": theme.color.text.subtle, children: frontIconComponent })) : frontIcon ? (_jsx(StyledFrontIcon, { "$disabled": disabled, render: frontIcon, color: "color.icon.base" })) : null;
+    const trailingIconToRender = trailingIconComponent ? (_jsx(InputLeadingIconContainer, { "$size": 20, "$iconColor": theme.color.text.subtle, children: trailingIconComponent })) : trailingIcon ? (_jsx(StyledTrailingIcon, { "$disabled": disabled, render: trailingIcon, color: "color.icon.base" })) : null;
+    return (_jsx(Field, { ...fieldProps, htmlFor: id, error: error, children: _jsxs(Box, { flex: true, alignItems: "center", justifyContent: "flex-start", children: [frontIconToRender && frontIconToRender, _jsx(Input, { disabled: disabled, type: type, id: id, name: name, ref: ref, onAnimationEnd: handleAnimationEnd, placeholder: placeholder, value: value, "$error": error, "$frontIcon": Boolean(frontIconToRender), "$fallbackStyle": fallbackStyle, autoComplete: autoCompleteAttr, onChange: (e) => {
                         onChange?.(e.currentTarget.value);
                         onInputChange?.(e);
-                    }, onBlur: onBlur, inputMode: inputModeAttr }), trailingIcon && (_jsx(StyledTrailingIcon, { "$disabled": disabled, render: trailingIcon, color: "sesame" }))] }) }));
+                    }, onBlur: onBlur, inputMode: inputModeAttr }), trailingIconToRender && trailingIconToRender] }) }));
 });
 //# sourceMappingURL=TextInput.js.map

package/dist/TextInput/TextInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":";AAAA,OAAO,EAKL,UAAU,GAEX,MAAM,OAAO,CAAA;AAEd,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAA;AAEvC,OAAO,EACL,KAAK,EACL,eAAe,EACf,kBAAkB,GACnB,MAAM,kCAAkC,CAAA;AACzC,OAAO,EAAE,WAAW,EAAE,MAAM,aAAa,CAAA;AAoCzC;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,UAAU,CAAC,SAAS,SAAS,CACpD,EACE,EAAE,EAAE,MAAM,EACV,IAAI,GAAG,MAAM,EACb,WAAW,EACX,IAAI,EACJ,KAAK,EACL,KAAK,GAAG,KAAK,EACb,MAAM,EACN,QAAQ,EACR,aAAa,EACb,UAAU,EACV,QAAQ,GAAG,KAAK,EAChB,SAAS,EACT,YAAY,EACZ,aAAa,EACb,gBAAgB,GAAG,KAAK,EACxB,aAAa,EACb,GAAG,UAAU,EACE,EACjB,GAAmC;IAEnC,MAAM,EAAE,GAAG,WAAW,CAAC,MAAM,CAAC,CAAA;IAE9B,MAAM,kBAAkB,GAAG,CAAC,CAAmC,EAAE,EAAE;QACjE,IAAI,CAAC,CAAC,aAAa,KAAK,iBAAiB,IAAI,UAAU,IAAI,CAAC,CAAC,KAAK,EAAE,CAAC;YACnE,UAAU,EAAE,CAAA;QACd,CAAC;IACH,CAAC,CAAA;IAED,OAAO,CACL,KAAC,KAAK,OAAK,UAAU,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,KAAK,YAC9C,MAAC,GAAG,IAAC,IAAI,QAAC,UAAU,EAAC,QAAQ,EAAC,cAAc,EAAC,YAAY,aACtD,SAAS,IAAI,CACZ,KAAC,eAAe,iBACH,QAAQ,EACnB,MAAM,EAAE,SAAS,EACjB,KAAK,EAAC,QAAQ,GACd,CACH,EACD,KAAC,KAAK,IACJ,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAE,IAAI,EACV,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,GAAG,EAAE,GAAG,EACR,cAAc,EAAE,kBAAkB,EAClC,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,KAAK,YACJ,KAAK,gBACD,SAAS,oBACL,aAAa,EAC7B,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,CAAC,CAA8B,EAAE,EAAE;wBAC3C,QAAQ,EAAE,CAAC,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC,CAAA;wBACjC,aAAa,EAAE,CAAC,CAAC,CAAC,CAAA;oBACpB,CAAC,EACD,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,aAAa,GACxB,EACD,YAAY,IAAI,CACf,KAAC,kBAAkB,iBACN,QAAQ,EACnB,MAAM,EAAE,YAAY,EACpB,KAAK,EAAC,QAAQ,GACd,CACH,IACG,GACA,CACT,CAAA;AACH,CAAC,CAAC,CAAA","sourcesContent":["import {\n  FocusEvent,\n  AnimationEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLInputAutoCompleteAttribute,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  Input,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\n\ninterface Props extends CommonFieldProps {\n  type?: 'text' | 'email' | 'password' | 'time' | 'date' | 'tel'\n  placeholder: string\n  name?: string\n  value: string\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**\n   * Triggers after animation end (animation duration is 2s),\n   * the animation starts when a user selects or hovers over an autofill option\n   */\n  onAutoFill?: () => void\n}\n\ntype InputMode = 'text' | 'email' | 'numeric'\n\n/** on change or on input required */\ntype InputProps = (\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n) & {\n  autoCompleteAttr?: HTMLInputAutoCompleteAttribute\n  inputModeAttr?: InputMode\n}\n\nexport type TextInputProps = Props & InputProps\n\n/**\n * A reusable TextInput component that supports various input types, custom styling, icons,\n * and autofill detection.\n *\n * ### Caveats:\n * - `onAutoFill` triggers after animation end (animation duration is 2s),\n * the animation starts when a user selects or hovers over an autofill option\n */\nexport const TextInput = forwardRef(function TextInput(\n  {\n    id: idProp,\n    type = 'text',\n    placeholder,\n    name,\n    value,\n    error = false,\n    onBlur,\n    onChange,\n    onInputChange,\n    onAutoFill,\n    disabled = false,\n    frontIcon,\n    trailingIcon,\n    fallbackStyle,\n    autoCompleteAttr = 'off',\n    inputModeAttr,\n    ...fieldProps\n  }: TextInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n\n  const handleAnimationEnd = (e: AnimationEvent<HTMLInputElement>) => {\n    if (e.animationName === 'onAutoFillStart' && onAutoFill && !!value) {\n      onAutoFill()\n    }\n  }\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        {frontIcon && (\n          <StyledFrontIcon\n            $disabled={disabled}\n            render={frontIcon}\n            color=\"sesame\"\n          />\n        )}\n        <Input\n          disabled={disabled}\n          type={type}\n          id={id}\n          name={name}\n          ref={ref}\n          onAnimationEnd={handleAnimationEnd}\n          placeholder={placeholder}\n          value={value}\n          $error={error}\n          $frontIcon={frontIcon}\n          $fallbackStyle={fallbackStyle}\n          autoComplete={autoCompleteAttr}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange?.(e.currentTarget.value)\n            onInputChange?.(e)\n          }}\n          onBlur={onBlur}\n          inputMode={inputModeAttr}\n        />\n        {trailingIcon && (\n          <StyledTrailingIcon\n            $disabled={disabled}\n            render={trailingIcon}\n            color=\"sesame\"\n          />\n        )}\n      </Box>\n    </Field>\n  )\n})\n"]}
+{"version":3,"file":"TextInput.js","sourceRoot":"","sources":["../../src/TextInput/TextInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n  FocusEvent,\n  AnimationEvent,\n  FormEvent,\n  ForwardedRef,\n  forwardRef,\n  HTMLInputAutoCompleteAttribute,\n} from 'react'\n\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport {\n  Input,\n  InputLeadingIconContainer,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useTheme } from 'styled-components'\n\ninterface Props extends CommonFieldProps {\n  type?: 'text' | 'email' | 'password' | 'time' | 'date' | 'tel'\n  placeholder: string\n  name?: string\n  value: string\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  /**\n   * Triggers after animation end (animation duration is 2s),\n   * the animation starts when a user selects or hovers over an autofill option\n   */\n  onAutoFill?: () => void\n}\n\ntype InputMode = 'text' | 'email' | 'numeric'\n\n/** on change or on input required */\ntype InputProps = (\n  | {\n      /** on change is required and on input optional */\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLInputElement>) => void\n    }\n  | {\n      /** on input is required and on change optional */\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLInputElement>) => void\n    }\n) & {\n  autoCompleteAttr?: HTMLInputAutoCompleteAttribute\n  inputModeAttr?: InputMode\n}\n\nexport type TextInputProps = Props & InputProps\n\n/**\n * A reusable TextInput component that supports various input types, custom styling, icons,\n * and autofill detection.\n *\n * ### Caveats:\n * - `onAutoFill` triggers after animation end (animation duration is 2s),\n * the animation starts when a user selects or hovers over an autofill option\n */\nexport const TextInput = forwardRef(function TextInput(\n  {\n    id: idProp,\n    type = 'text',\n    placeholder,\n    name,\n    value,\n    error = false,\n    onBlur,\n    onChange,\n    onInputChange,\n    onAutoFill,\n    disabled = false,\n    frontIcon,\n    frontIconComponent,\n    trailingIconComponent,\n    trailingIcon,\n    fallbackStyle,\n    autoCompleteAttr = 'off',\n    inputModeAttr,\n    ...fieldProps\n  }: TextInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\n  const theme = useTheme()\n\n  const handleAnimationEnd = (e: AnimationEvent<HTMLInputElement>) => {\n    if (e.animationName === 'onAutoFillStart' && onAutoFill && !!value) {\n      onAutoFill()\n    }\n  }\n\n  const frontIconToRender = frontIconComponent ? (\n    <InputLeadingIconContainer $size={20} $iconColor={theme.color.text.subtle}>\n      {frontIconComponent}\n    </InputLeadingIconContainer>\n  ) : frontIcon ? (\n    <StyledFrontIcon\n      $disabled={disabled}\n      render={frontIcon}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  const trailingIconToRender = trailingIconComponent ? (\n    <InputLeadingIconContainer $size={20} $iconColor={theme.color.text.subtle}>\n      {trailingIconComponent}\n    </InputLeadingIconContainer>\n  ) : trailingIcon ? (\n    <StyledTrailingIcon\n      $disabled={disabled}\n      render={trailingIcon}\n      color=\"color.icon.base\"\n    />\n  ) : null\n\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n        {frontIconToRender && frontIconToRender}\n        <Input\n          disabled={disabled}\n          type={type}\n          id={id}\n          name={name}\n          ref={ref}\n          onAnimationEnd={handleAnimationEnd}\n          placeholder={placeholder}\n          value={value}\n          $error={error}\n          $frontIcon={Boolean(frontIconToRender)}\n          $fallbackStyle={fallbackStyle}\n          autoComplete={autoCompleteAttr}\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange?.(e.currentTarget.value)\n            onInputChange?.(e)\n          }}\n          onBlur={onBlur}\n          inputMode={inputModeAttr}\n        />\n        {trailingIconToRender && trailingIconToRender}\n      </Box>\n    </Field>\n  )\n})\n"]}

package/dist/ThemeProvider/utils/colourMap.d.ts

@@ -1,16 +1,10 @@
 import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json';
 import { Color } from '../../theme';
+import { Flatten, Prettify } from '../../types';
 import { Theme } from '../ThemeProvider';
-type Flatten<T, Prefix extends string = ''> = {
-    [K in keyof T & string]: T[K] extends Record<string, any> ? Flatten<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;
-}[keyof T & string];
-type Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
 export type NewColor = Prettify<Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>>;
 export type ColorTypes = Color | NewColor;
 export declare const resolveToThemeColor: (color: ColorTypes, theme: Theme) => string;
-export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.inverse" | "color.text.nonEssential" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.active" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.active" | "color.interactive.tertiary.base" | "color.interactive.tertiary.hover" | "color.interactive.tertiary.pressed" | "color.interactive.tertiary.active" | "color.interactive.destructive.base" | "color.interactive.destructive.hover" | "color.interactive.destructive.pressed" | "color.interactive.destructive.active" | "color.background.100" | "color.background.200" | "color.background.000" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.inverse" | "color.icon.nonEssential" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.000" | "color.surface.base.300" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.feedback.inactive.100" | "color.feedback.inactive.50" | "color.focus.onLight" | "color.focus.onDark" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.000" | "color.illustration.neutral.300" | "color.illustration.neutral.900" | "extended1.100" | "extended1.20" | "compareTheMarket" | "ravelin" | "stripe" | "intercom" | "checkout" | "hometree" | "premfina" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.compareTheMarket" | "thirdParty.facebook" | "thirdParty.ravelin" | "thirdParty.confusedCom" | "thirdParty.stripe" | "thirdParty.intercom" | "thirdParty.twitter" | "thirdParty.checkout" | "thirdParty.hometree" | "thirdParty.premfina" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "confused" | "x";
+export declare const getColorPath: (color: ColorTypes) => "meta" | "onfido" | "rac" | "color.text.base" | "color.text.subtle" | "color.text.contrast" | "color.text.inverse" | "color.text.nonEssential" | "color.interactive.primary.base" | "color.interactive.primary.hover" | "color.interactive.primary.pressed" | "color.interactive.primary.active" | "color.interactive.secondary.base" | "color.interactive.secondary.hover" | "color.interactive.secondary.pressed" | "color.interactive.secondary.active" | "color.interactive.tertiary.base" | "color.interactive.tertiary.hover" | "color.interactive.tertiary.pressed" | "color.interactive.tertiary.active" | "color.interactive.destructive.base" | "color.interactive.destructive.hover" | "color.interactive.destructive.pressed" | "color.interactive.destructive.active" | "color.background.100" | "color.background.200" | "color.background.000" | "color.icon.base" | "color.icon.subtle" | "color.icon.contrast" | "color.icon.inverse" | "color.icon.nonEssential" | "color.surface.base.400" | "color.surface.base.100" | "color.surface.base.200" | "color.surface.base.300" | "color.surface.base.000" | "color.surface.base.900" | "color.surface.brand.400" | "color.surface.brand.100" | "color.surface.brand.200" | "color.surface.brand.300" | "color.surface.brand.accent1" | "color.surface.brand.accent2" | "color.surface.brand.accent3" | "color.surface.brand.accent4" | "color.feedback.negative.100" | "color.feedback.negative.200" | "color.feedback.positive.100" | "color.feedback.positive.200" | "color.feedback.notice.100" | "color.feedback.notice.200" | "color.feedback.informative.100" | "color.feedback.informative.200" | "color.feedback.inactive.100" | "color.feedback.inactive.50" | "color.focus.onLight" | "color.focus.onDark" | "color.border.base" | "color.border.subtle" | "color.border.contrast" | "color.illustration.accent1.100" | "color.illustration.accent1.200" | "color.illustration.accent2.100" | "color.illustration.accent2.200" | "color.illustration.accent3.100" | "color.illustration.accent3.200" | "color.illustration.accent4.100" | "color.illustration.accent4.200" | "color.illustration.neutral.400" | "color.illustration.neutral.100" | "color.illustration.neutral.200" | "color.illustration.neutral.300" | "color.illustration.neutral.000" | "color.illustration.neutral.900" | "extended1.100" | "extended1.20" | "compareTheMarket" | "ravelin" | "stripe" | "intercom" | "checkout" | "hometree" | "premfina" | "thirdParty.onfido" | "thirdParty.rac" | "thirdParty.compareTheMarket" | "thirdParty.facebook" | "thirdParty.ravelin" | "thirdParty.confusedCom" | "thirdParty.stripe" | "thirdParty.intercom" | "thirdParty.twitter" | "thirdParty.checkout" | "thirdParty.hometree" | "thirdParty.premfina" | "lollipop" | "marshmallowPink" | "bubblegum" | "fairyFloss" | "boba" | "liquorice" | "sesame" | "chia" | "custard" | "mascarpone" | "coconut" | "cream" | "spearmint" | "feijoa" | "blueberry" | "macaroon" | "pistachio" | "matcha" | "caramel" | "peanut" | "marzipan" | "oatmeal" | "satsuma" | "strawberry" | "watermelon" | "apple" | "mint" | "lemon" | "sherbert" | "tangerine" | "confused" | "x";
 export declare const formatDesignTokenColor: () => string;
 export declare const legacyColorMap: Record<Color, NewColor>;
-export {};

package/dist/ThemeProvider/utils/colourMap.js.map

@@ -1 +1 @@
-{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"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","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\nimport { Color } from '../../theme'\nimport { Theme } from '../ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\n\ntype Flatten<T, Prefix extends string = ''> = {\n  [K in keyof T & string]: T[K] extends Record<string, any>\n    ? Flatten<T[K], `${Prefix}${K}.`>\n    : `${Prefix}${K}`\n}[keyof T & string]\n\ntype Prettify<T> = {\n  [K in keyof T]: T[K]\n} & {}\n\nexport type NewColor = Prettify<\n  Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>\n>\n\nexport type ColorTypes = Color | NewColor\n\nexport const resolveToThemeColor = (\n  color: ColorTypes,\n  theme: Theme,\n): string => {\n  const colourPath = getColorPath(color)\n  return getFromObject({\n    obj: theme,\n    path: colourPath,\n  })\n}\n\n// a function that returns a flattened dot notation string path to access the color value\nexport const getColorPath = (color: ColorTypes) => {\n  return color in legacyColorMap\n    ? legacyColorMap[color as keyof typeof legacyColorMap]\n    : color\n}\n\n// a function that returns the design token color paths as a comma-separated string\nexport const formatDesignTokenColor = (): string => {\n  const { color, extended1, thirdParty } = designTokens\n  const colors = { color, extended1, thirdParty }\n\n  if (colors === null) {\n    return ''\n  }\n\n  const result: string[] = []\n  const destructureNestedObject = (obj: any, currentPath: string) => {\n    for (const key in obj) {\n      if (Object.prototype.hasOwnProperty.call(obj, key)) {\n        const value = obj[key]\n        const newPath = currentPath ? `${currentPath}.${key}` : key\n        if (typeof value === 'object' && value !== null) {\n          destructureNestedObject(value, newPath)\n        } else {\n          result.push(newPath)\n        }\n      }\n    }\n  }\n  destructureNestedObject(colors, '')\n  return result.join(', ')\n}\n\n// old colour name → new colour path // base token value\nexport const legacyColorMap: Record<Color, NewColor> = {\n  fairyFloss: 'color.surface.brand.100', // palette.primary.040\n  bubblegum: 'color.surface.brand.200', // palette.primary.060\n  marshmallowPink: 'color.surface.brand.300', // palette.primary.100\n  lollipop: 'color.surface.brand.400', // palatte.primary.120\n\n  // Core Secondary\n  chia: 'color.feedback.inactive.100', // palette.secondary.040\n  sesame: 'color.text.subtle', // palette.secondary.060\n  liquorice: 'color.text.base', // palette.secondary.100\n  boba: 'color.text.contrast', // palette.secondary.120\n\n  // Core Tertiary\n  cream: 'color.surface.base.000', // palette.neutral.000\n  coconut: 'color.surface.base.100', // palette.neutral.010\n  mascarpone: 'color.surface.base.200', // palette.neutral.020\n  custard: 'color.surface.base.300', // palette.neutral.040\n\n  // Brand Secondary\n  feijoa: 'color.illustration.accent1.100', // palette.brand1.060\n  spearmint: 'color.illustration.accent1.200', // palette.brand1.100\n  macaroon: 'color.illustration.accent2.100', // palette.brand2.060\n  blueberry: 'color.illustration.accent2.200', // palette.brand2.100\n  pistachio: 'color.illustration.accent3.200', // palette.brand3.100\n  matcha: 'color.illustration.accent3.100', // palette.brand3.060\n  caramel: 'color.illustration.accent4.200', // palette.brand4.100\n  peanut: 'color.illustration.accent4.100', // palette.brand4.060\n  marzipan: 'color.illustration.neutral.400', // palette.neutral.100\n  oatmeal: 'color.illustration.neutral.300', // palette.neutral.060\n  satsuma: 'extended1.20', // extended1.020\n\n  // Traffic light\n  watermelon: 'color.feedback.negative.100', // palette.negative.020\n  strawberry: 'color.feedback.negative.200', // palette.negative.100\n  apple: 'color.feedback.positive.200', // palette.positive.100\n  mint: 'color.feedback.positive.100', // palette.positive.020\n  lemon: 'color.feedback.notice.200', // palette.notice.100\n  sherbert: 'color.feedback.notice.100', // palette.notice.020\n  tangerine: 'extended1.100', // extended1.100\n\n  // Third-party brand colours\n  compareTheMarket: 'thirdParty.compareTheMarket',\n  confused: 'thirdParty.confusedCom',\n  onfido: 'thirdParty.onfido',\n  x: 'thirdParty.twitter', // x rebrand not yet reflected in foundations\n  premfina: 'thirdParty.premfina',\n  checkout: 'thirdParty.checkout',\n  meta: 'thirdParty.facebook', // Meta rebrand not yet reflected in foundations\n  stripe: 'thirdParty.stripe',\n  intercom: 'thirdParty.intercom',\n  ravelin: 'thirdParty.ravelin',\n  rac: 'thirdParty.rac',\n  hometree: 'thirdParty.hometree',\n} as const\n"]}
+{"version":3,"file":"colourMap.js","sourceRoot":"","sources":["../../../src/ThemeProvider/utils/colourMap.ts"],"names":[],"mappings":"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","sourcesContent":["import * as designTokens from '@mrshmllw/smores-foundations/build/web/variables.json'\nimport { Color } from '../../theme'\nimport { Flatten, Prettify } from '../../types'\nimport { Theme } from '../ThemeProvider'\nimport { getFromObject } from '../../utils/getFromObject'\n\nexport type NewColor = Prettify<\n  Flatten<Pick<typeof designTokens, 'color' | 'extended1' | 'thirdParty'>>\n>\n\nexport type ColorTypes = Color | NewColor\n\nexport const resolveToThemeColor = (\n  color: ColorTypes,\n  theme: Theme,\n): string => {\n  const colourPath = getColorPath(color)\n  return getFromObject({\n    obj: theme,\n    path: colourPath,\n  })\n}\n\n// a function that returns a flattened dot notation string path to access the color value\nexport const getColorPath = (color: ColorTypes) => {\n  return color in legacyColorMap\n    ? legacyColorMap[color as keyof typeof legacyColorMap]\n    : color\n}\n\n// a function that returns the design token color paths as a comma-separated string\nexport const formatDesignTokenColor = (): string => {\n  const { color, extended1, thirdParty } = designTokens\n  const colors = { color, extended1, thirdParty }\n\n  if (colors === null) {\n    return ''\n  }\n\n  const result: string[] = []\n  const destructureNestedObject = (obj: any, currentPath: string) => {\n    for (const key in obj) {\n      if (Object.prototype.hasOwnProperty.call(obj, key)) {\n        const value = obj[key]\n        const newPath = currentPath ? `${currentPath}.${key}` : key\n        if (typeof value === 'object' && value !== null) {\n          destructureNestedObject(value, newPath)\n        } else {\n          result.push(newPath)\n        }\n      }\n    }\n  }\n  destructureNestedObject(colors, '')\n  return result.join(', ')\n}\n\n// old colour name → new colour path // base token value\nexport const legacyColorMap: Record<Color, NewColor> = {\n  fairyFloss: 'color.surface.brand.100', // palette.primary.040\n  bubblegum: 'color.surface.brand.200', // palette.primary.060\n  marshmallowPink: 'color.surface.brand.300', // palette.primary.100\n  lollipop: 'color.surface.brand.400', // palatte.primary.120\n\n  // Core Secondary\n  chia: 'color.feedback.inactive.100', // palette.secondary.040\n  sesame: 'color.text.subtle', // palette.secondary.060\n  liquorice: 'color.text.base', // palette.secondary.100\n  boba: 'color.text.contrast', // palette.secondary.120\n\n  // Core Tertiary\n  cream: 'color.surface.base.000', // palette.neutral.000\n  coconut: 'color.surface.base.100', // palette.neutral.010\n  mascarpone: 'color.surface.base.200', // palette.neutral.020\n  custard: 'color.surface.base.300', // palette.neutral.040\n\n  // Brand Secondary\n  feijoa: 'color.illustration.accent1.100', // palette.brand1.060\n  spearmint: 'color.illustration.accent1.200', // palette.brand1.100\n  macaroon: 'color.illustration.accent2.100', // palette.brand2.060\n  blueberry: 'color.illustration.accent2.200', // palette.brand2.100\n  pistachio: 'color.illustration.accent3.200', // palette.brand3.100\n  matcha: 'color.illustration.accent3.100', // palette.brand3.060\n  caramel: 'color.illustration.accent4.200', // palette.brand4.100\n  peanut: 'color.illustration.accent4.100', // palette.brand4.060\n  marzipan: 'color.illustration.neutral.400', // palette.neutral.100\n  oatmeal: 'color.illustration.neutral.300', // palette.neutral.060\n  satsuma: 'extended1.20', // extended1.020\n\n  // Traffic light\n  watermelon: 'color.feedback.negative.100', // palette.negative.020\n  strawberry: 'color.feedback.negative.200', // palette.negative.100\n  apple: 'color.feedback.positive.200', // palette.positive.100\n  mint: 'color.feedback.positive.100', // palette.positive.020\n  lemon: 'color.feedback.notice.200', // palette.notice.100\n  sherbert: 'color.feedback.notice.100', // palette.notice.020\n  tangerine: 'extended1.100', // extended1.100\n\n  // Third-party brand colours\n  compareTheMarket: 'thirdParty.compareTheMarket',\n  confused: 'thirdParty.confusedCom',\n  onfido: 'thirdParty.onfido',\n  x: 'thirdParty.twitter', // x rebrand not yet reflected in foundations\n  premfina: 'thirdParty.premfina',\n  checkout: 'thirdParty.checkout',\n  meta: 'thirdParty.facebook', // Meta rebrand not yet reflected in foundations\n  stripe: 'thirdParty.stripe',\n  intercom: 'thirdParty.intercom',\n  ravelin: 'thirdParty.ravelin',\n  rac: 'thirdParty.rac',\n  hometree: 'thirdParty.hometree',\n} as const\n"]}

package/dist/fields/commonFieldTypes.d.ts

@@ -1,6 +1,6 @@
 import { ReactElement, ReactNode } from 'react';
-import { Icons } from '../Icon/iconsList';
 import { MarginProps } from '../utils/space';
+import { Icons } from '../Icon';
 export interface CommonFieldProps extends MarginProps {
     id?: string;
     className?: string;
@@ -13,7 +13,9 @@ export interface CommonFieldProps extends MarginProps {
     errorMsg?: string | ReactElement<any>;
     completed?: boolean;
     frontIcon?: Icons;
+    frontIconComponent?: ReactNode;
     trailingIcon?: Icons;
+    trailingIconComponent?: ReactNode;
     fallbackStyle?: boolean;
     disabled?: boolean;
 }

package/dist/fields/commonFieldTypes.js.map

@@ -1 +1 @@
-{"version":3,"file":"commonFieldTypes.js","sourceRoot":"","sources":["../../src/fields/commonFieldTypes.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode } from 'react'\nimport { Icons } from '../Icon/iconsList'\nimport { MarginProps } from '../utils/space'\n\nexport interface CommonFieldProps extends MarginProps {\n  id?: string\n  className?: string\n  children?: ReactNode\n  label?: string\n  renderAsTitle?: boolean\n  assistiveText?: string | ReactElement<any>\n  required?: boolean\n  error?: boolean\n  errorMsg?: string | ReactElement<any>\n  completed?: boolean\n  frontIcon?: Icons\n  trailingIcon?: Icons\n  fallbackStyle?: boolean\n  disabled?: boolean\n}\n"]}
+{"version":3,"file":"commonFieldTypes.js","sourceRoot":"","sources":["../../src/fields/commonFieldTypes.ts"],"names":[],"mappings":"","sourcesContent":["import { ReactElement, ReactNode } from 'react'\nimport { MarginProps } from '../utils/space'\nimport { Icons } from '../Icon'\n\nexport interface CommonFieldProps extends MarginProps {\n  id?: string\n  className?: string\n  children?: ReactNode\n  label?: string\n  renderAsTitle?: boolean\n  assistiveText?: string | ReactElement<any>\n  required?: boolean\n  error?: boolean\n  errorMsg?: string | ReactElement<any>\n  completed?: boolean\n  frontIcon?: Icons\n  frontIconComponent?: ReactNode\n  trailingIcon?: Icons\n  trailingIconComponent?: ReactNode\n  fallbackStyle?: boolean\n  disabled?: boolean\n}\n"]}

package/dist/fields/components/CommonInput.d.ts

@@ -1,11 +1,11 @@
-import { Icons } from '../../Icon/iconsList';
+import { Icons } from '../../Icon';
 interface IInput {
     $error?: boolean;
     disabled?: boolean;
     selected?: boolean;
     step?: number;
     value?: string;
-    $frontIcon?: Icons;
+    $frontIcon?: boolean;
     $trailingIcon?: Icons;
     $fallbackStyle?: boolean;
 }
@@ -13,6 +13,10 @@ interface SIcon {
     $disabled?: boolean;
 }
 export declare const Input: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, IInput>> & string;
+export declare const InputLeadingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+    $size: import("../../types").IconSize;
+    $iconColor?: string;
+}, SIcon>> & string;
 export declare const StyledFrontIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
     className?: string;
     render: Icons;
@@ -27,4 +31,8 @@ export declare const StyledTrailingIcon: import("styled-components/dist/types").
     color?: import("../..").ColorTypes;
     rotate?: number;
 } & import("../..").MarginProps, SIcon>> & string & Omit<import("react").FC<import("../../Icon/Icon").IconProps>, keyof import("react").Component<any, {}, any>>;
+export declare const InputTrailingIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "$size" | "$iconColor"> & {
+    $size: import("../../types").IconSize;
+    $iconColor?: string;
+}, SIcon>> & string;
 export {};

package/dist/fields/components/CommonInput.js

@@ -1,5 +1,6 @@
 import styled, { css } from 'styled-components';
 import { Icon } from '../../Icon';
+import { IconContainer } from '../../sharedStyles/shared.styles';
 export const Input = styled.input `
   border: none;
   color: ${({ $error, theme }) => $error ? theme.color.feedback.negative[200] : theme.color.text.base};
@@ -64,6 +65,14 @@ export const Input = styled.input `
     }
   }
 `;
+export const InputLeadingIconContainer = styled(IconContainer) `
+  position: relative;
+  left: 36px;
+  margin-left: -24px;
+  z-index: 1;
+  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};
+  color: ${({ theme }) => theme.color.text.base};
+`;
 export const StyledFrontIcon = styled(Icon) `
   position: relative;
   left: 36px;
@@ -79,4 +88,11 @@ export const StyledTrailingIcon = styled(Icon) `
   opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};
   color: ${({ theme }) => theme.color.text.base};
 `;
+export const InputTrailingIconContainer = styled(IconContainer) `
+  position: relative;
+  right: 36px;
+  margin-right: -36px;
+  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};
+  color: ${({ theme }) => theme.color.text.base};
+`;
 //# sourceMappingURL=CommonInput.js.map

package/dist/fields/components/CommonInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,IAAI,EAAE,MAAM,YAAY,CAAA;AAkBjC,MAAM,CAAC,MAAM,KAAK,GAAG,MAAM,CAAC,KAAK,CAAQ;;WAE9B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAC7B,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;;;;YAI3D,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,SAAS,CAAC;aACvD,CAAC,EAAE,QAAQ,EAAE,EAAE,EAAE,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;;sBAEjC,CAAC,EAAE,cAAc,EAAE,KAAK,EAAE,EAAE,EAAE,CAChD,cAAc;IACZ,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC,GAAG,CAAC;IAC/B,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC;;MAE/B,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CACtB,MAAM,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,MAAM;;IAEzE,CAAC,EAAE,QAAQ,EAAE,MAAM,EAAE,KAAK,EAAE,EAAE,EAAE,CAChC,CAAC,QAAQ;IACT,CAAC,MAAM;IACP,GAAG,CAAA;;;wBAGiB,KAAK,CAAC,KAAK,CAAC,MAAM,CAAC,IAAI;;KAE1C;;;;;IAKD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV;;KAEC;;IAED,CAAC,EAAE,aAAa,EAAE,EAAE,EAAE,CACtB,aAAa;IACb;;KAEC;;;;;;;;;;;;aAYQ,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,MAAM;;;;;;;;;;;;;;;;CAgBlD,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;;aAKrC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;CAC9C,CAAA;AAED,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAO;;;;aAIxC,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,GAAG,CAAC;WAC9C,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI;CAC9C,CAAA","sourcesContent":["import styled, { css } from 'styled-components'\nimport { Icon } from '../../Icon'\nimport { Icons } from '../../Icon/iconsList'\n\ninterface IInput {\n  $error?: boolean\n  disabled?: boolean\n  selected?: boolean\n  step?: number\n  value?: string\n  $frontIcon?: Icons\n  $trailingIcon?: Icons\n  $fallbackStyle?: boolean\n}\n\ninterface SIcon {\n  $disabled?: boolean\n}\n\nexport const Input = styled.input<IInput>`\n  border: none;\n  color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.text.base};\n  font-size: 16px;\n  width: 100%;\n  outline: none;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  padding: 18px 14px;\n  background-color: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  border: 2px solid\n    ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n\n  ${({ disabled, $error, theme }) =>\n    !disabled &&\n    !$error &&\n    css`\n      &:hover,\n      &:focus-within {\n        border-color: ${theme.color.border.base};\n      }\n    `}\n\n  border-radius: 12px;\n  height: auto;\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    `\n      padding-left: 42px;\n    `}\n\n  ${({ $trailingIcon }) =>\n    $trailingIcon &&\n    `\n      padding-right: 42px;\n    `}\n\n  /* Remove the spinner on Firefox and Webkit browsers */\n  -moz-appearance: textfield;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => theme.color.text.subtle};\n  }\n\n  &:-webkit-autofill {\n    animation-name: onAutoFillStart;\n    animation-duration: 2s;\n  }\n\n  @keyframes onAutoFillStart {\n    from {\n      background-color: inherit;\n    }\n    to {\n      background-color: inherit;\n    }\n  }\n`\n\nexport const StyledFrontIcon = styled(Icon)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: -24px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledTrailingIcon = styled(Icon)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n"]}
+{"version":3,"file":"CommonInput.js","sourceRoot":"","sources":["../../../src/fields/components/CommonInput.tsx"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components'\nimport { Icon, Icons } from '../../Icon'\nimport { IconContainer } from '../../sharedStyles/shared.styles'\n\ninterface IInput {\n  $error?: boolean\n  disabled?: boolean\n  selected?: boolean\n  step?: number\n  value?: string\n  $frontIcon?: boolean\n  $trailingIcon?: Icons\n  $fallbackStyle?: boolean\n}\n\ninterface SIcon {\n  $disabled?: boolean\n}\n\nexport const Input = styled.input<IInput>`\n  border: none;\n  color: ${({ $error, theme }) =>\n    $error ? theme.color.feedback.negative[200] : theme.color.text.base};\n  font-size: 16px;\n  width: 100%;\n  outline: none;\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'initial')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  padding: 18px 14px;\n  background-color: ${({ $fallbackStyle, theme }) =>\n    $fallbackStyle\n      ? theme.color.surface.base[300]\n      : theme.color.background['000']};\n  border: 2px solid\n    ${({ $error, theme }) =>\n      $error ? theme.color.feedback.negative[200] : theme.color.border.subtle};\n\n  ${({ disabled, $error, theme }) =>\n    !disabled &&\n    !$error &&\n    css`\n      &:hover,\n      &:focus-within {\n        border-color: ${theme.color.border.base};\n      }\n    `}\n\n  border-radius: 12px;\n  height: auto;\n\n  ${({ $frontIcon }) =>\n    $frontIcon &&\n    `\n      padding-left: 42px;\n    `}\n\n  ${({ $trailingIcon }) =>\n    $trailingIcon &&\n    `\n      padding-right: 42px;\n    `}\n\n  /* Remove the spinner on Firefox and Webkit browsers */\n  -moz-appearance: textfield;\n\n  &::-webkit-outer-spin-button,\n  &::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    margin: 0;\n  }\n\n  &::placeholder {\n    color: ${({ theme }) => theme.color.text.subtle};\n  }\n\n  &:-webkit-autofill {\n    animation-name: onAutoFillStart;\n    animation-duration: 2s;\n  }\n\n  @keyframes onAutoFillStart {\n    from {\n      background-color: inherit;\n    }\n    to {\n      background-color: inherit;\n    }\n  }\n`\n\nexport const InputLeadingIconContainer = styled(IconContainer)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: -24px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledFrontIcon = styled(Icon)<SIcon>`\n  position: relative;\n  left: 36px;\n  margin-left: -24px;\n  z-index: 1;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const StyledTrailingIcon = styled(Icon)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n\nexport const InputTrailingIconContainer = styled(IconContainer)<SIcon>`\n  position: relative;\n  right: 36px;\n  margin-right: -36px;\n  opacity: ${({ $disabled }) => ($disabled ? '0.5' : '1')};\n  color: ${({ theme }) => theme.color.text.base};\n`\n"]}

package/dist/index.d.ts

@@ -50,6 +50,8 @@ export * from './Tooltip';
 export * from './utils/dateOfBirth/dateOfBirthValidator';
 export * from './utils/dateOfBirth/dateOfBirthValidator.utils';
 export * from './utils/dateOfBirth/schema';
+export * from './utils/utilTypes';
 export * from './utils/space';
 export * from './ThemeProvider';
 export * from './styled';
+export * from './sharedStyles/shared.styles';

package/dist/index.js

@@ -50,7 +50,9 @@ export * from './Tooltip';
 export * from './utils/dateOfBirth/dateOfBirthValidator';
 export * from './utils/dateOfBirth/dateOfBirthValidator.utils';
 export * from './utils/dateOfBirth/schema';
+export * from './utils/utilTypes';
 export * from './utils/space';
 export * from './ThemeProvider';
 export * from './styled';
+export * from './sharedStyles/shared.styles';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,0CAA0C,CAAA;AACxD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA","sourcesContent":["export * from './Accordion'\nexport * from './ActionDropdown'\nexport * from './Badge'\nexport * from './Alert'\nexport * from './BadgeList'\nexport * from './Banner'\nexport * from './Box'\nexport * from './Button'\nexport * from './Card'\nexport * from './CheckBox'\nexport * from './CheckBoxGroup'\nexport * from './Chip'\nexport * from './CurrencyInput'\nexport * from './Datepicker'\nexport * from './Divider'\nexport * from './Dropdown'\nexport * from './fields/Field'\nexport * from './fields/Fieldset'\nexport * from './fontStyle'\nexport * from './hooks'\nexport * from './Icon'\nexport * from './IconStrict'\nexport * from './IconWrapper'\nexport * from './LabelledText'\nexport * from './Link'\nexport * from './Loader'\nexport * from './Logo'\nexport * from './Modal'\nexport * from './NumberInput'\nexport * from './Pagination'\nexport * from './ProgressIndicator'\nexport * from './RadioGroup'\nexport * from './RichText'\nexport * from './RichTextEditor'\nexport * from './Row'\nexport * from './SearchInput'\nexport * from './SegmentedControl'\nexport * from './SliderInput'\nexport * from './Snackbar'\nexport * from './SupportMessage'\nexport * from './Table'\nexport * from './Tag'\nexport * from './Text'\nexport * from './Textarea'\nexport * from './TextDateOfBirthInput'\nexport * from './TextInput'\nexport * from './theme'\nexport * from './Toggle'\nexport * from './Tooltip'\nexport * from './utils/dateOfBirth/dateOfBirthValidator'\nexport * from './utils/dateOfBirth/dateOfBirthValidator.utils'\nexport * from './utils/dateOfBirth/schema'\nexport * from './utils/space'\nexport * from './ThemeProvider'\nexport * from './styled'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,cAAc,CAAA;AAC5B,cAAc,qBAAqB,CAAA;AACnC,cAAc,cAAc,CAAA;AAC5B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,oBAAoB,CAAA;AAClC,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,wBAAwB,CAAA;AACtC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,0CAA0C,CAAA;AACxD,cAAc,gDAAgD,CAAA;AAC9D,cAAc,4BAA4B,CAAA;AAC1C,cAAc,mBAAmB,CAAA;AACjC,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,UAAU,CAAA;AACxB,cAAc,8BAA8B,CAAA","sourcesContent":["export * from './Accordion'\nexport * from './ActionDropdown'\nexport * from './Badge'\nexport * from './Alert'\nexport * from './BadgeList'\nexport * from './Banner'\nexport * from './Box'\nexport * from './Button'\nexport * from './Card'\nexport * from './CheckBox'\nexport * from './CheckBoxGroup'\nexport * from './Chip'\nexport * from './CurrencyInput'\nexport * from './Datepicker'\nexport * from './Divider'\nexport * from './Dropdown'\nexport * from './fields/Field'\nexport * from './fields/Fieldset'\nexport * from './fontStyle'\nexport * from './hooks'\nexport * from './Icon'\nexport * from './IconStrict'\nexport * from './IconWrapper'\nexport * from './LabelledText'\nexport * from './Link'\nexport * from './Loader'\nexport * from './Logo'\nexport * from './Modal'\nexport * from './NumberInput'\nexport * from './Pagination'\nexport * from './ProgressIndicator'\nexport * from './RadioGroup'\nexport * from './RichText'\nexport * from './RichTextEditor'\nexport * from './Row'\nexport * from './SearchInput'\nexport * from './SegmentedControl'\nexport * from './SliderInput'\nexport * from './Snackbar'\nexport * from './SupportMessage'\nexport * from './Table'\nexport * from './Tag'\nexport * from './Text'\nexport * from './Textarea'\nexport * from './TextDateOfBirthInput'\nexport * from './TextInput'\nexport * from './theme'\nexport * from './Toggle'\nexport * from './Tooltip'\nexport * from './utils/dateOfBirth/dateOfBirthValidator'\nexport * from './utils/dateOfBirth/dateOfBirthValidator.utils'\nexport * from './utils/dateOfBirth/schema'\nexport * from './utils/utilTypes'\nexport * from './utils/space'\nexport * from './ThemeProvider'\nexport * from './styled'\nexport * from './sharedStyles/shared.styles'\n"]}

package/dist/sharedStyles/shared.styles.d.ts

@@ -0,0 +1,5 @@
+import { IconSize } from '../types';
+export declare const IconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {
+    $size: IconSize;
+    $iconColor?: string;
+}>> & string;

package/dist/sharedStyles/shared.styles.js

@@ -0,0 +1,22 @@
+import styled, { css } from 'styled-components';
+export const IconContainer = styled.span `
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ $size }) => css `
+    width: ${$size}px;
+    height: ${$size}px;
+  `}
+
+  svg {
+    width: 100%;
+    height: 100%;
+
+    ${({ $iconColor }) => $iconColor &&
+    css `
+        fill: ${$iconColor};
+      `}
+  }
+`;
+//# sourceMappingURL=shared.styles.js.map

package/dist/sharedStyles/shared.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"shared.styles.js","sourceRoot":"","sources":["../../src/sharedStyles/shared.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAG/C,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,IAAI,CAGtC;;;;;IAKE,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;aACT,KAAK;cACJ,KAAK;GAChB;;;;;;MAMG,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;gBACO,UAAU;OACnB;;CAEN,CAAA","sourcesContent":["import styled, { css } from 'styled-components'\nimport { IconSize } from '../types'\n\nexport const IconContainer = styled.span<{\n  $size: IconSize\n  $iconColor?: string\n}>`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  ${({ $size }) => css`\n    width: ${$size}px;\n    height: ${$size}px;\n  `}\n\n  svg {\n    width: 100%;\n    height: 100%;\n\n    ${({ $iconColor }) =>\n      $iconColor &&\n      css`\n        fill: ${$iconColor};\n      `}\n  }\n`\n"]}

package/dist/types.d.ts

@@ -3,3 +3,10 @@ export type GeneralEvent = Event | UIEvent;
 export type GenericEventCallback = (e: GeneralEvent) => unknown;
 export type KeyboardEventCallback = (e: KeyboardEvent) => unknown;
 export type MouseEventCallBack = (event: MouseEvent<HTMLElement>) => void;
+export type IconSize = 12 | 16 | 20 | 24 | 32 | 40;
+export type Flatten<T, Prefix extends string = ''> = {
+    [K in keyof T & string]: T[K] extends Record<string, any> ? Flatten<T[K], `${Prefix}${K}.`> : `${Prefix}${K}`;
+}[keyof T & string];
+export type Prettify<T> = {
+    [K in keyof T]: T[K];
+} & {};

package/dist/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, UIEvent } from 'react'\n// Events Types\nexport type GeneralEvent = Event | UIEvent\nexport type GenericEventCallback = (e: GeneralEvent) => unknown\nexport type KeyboardEventCallback = (e: KeyboardEvent) => unknown\nexport type MouseEventCallBack = (event: MouseEvent<HTMLElement>) => void\n"]}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"","sourcesContent":["import { MouseEvent, UIEvent } from 'react'\n// Events Types\nexport type GeneralEvent = Event | UIEvent\nexport type GenericEventCallback = (e: GeneralEvent) => unknown\nexport type KeyboardEventCallback = (e: KeyboardEvent) => unknown\nexport type MouseEventCallBack = (event: MouseEvent<HTMLElement>) => void\n\n// Common types\nexport type IconSize = 12 | 16 | 20 | 24 | 32 | 40\n\nexport type Flatten<T, Prefix extends string = ''> = {\n  [K in keyof T & string]: T[K] extends Record<string, any>\n    ? Flatten<T[K], `${Prefix}${K}.`>\n    : `${Prefix}${K}`\n}[keyof T & string]\n\nexport type Prettify<T> = {\n  [K in keyof T]: T[K]\n} & {}\n"]}

package/dist/utils/deprecated.js

@@ -1,6 +1,12 @@
 import { useEffect } from 'react';
-const env = process.env.REACT_APP_NODE_ENV || process.env.ENV;
-export const isLocal = env === 'local';
+const detectEnv = () => {
+    const env = (typeof process !== 'undefined' && process?.env?.REACT_APP_NODE_ENV) ||
+        (typeof process !== 'undefined' && process?.env?.NODE_ENV);
+    if (env === 'development' || env === 'production' || env === 'local')
+        return env;
+    return null;
+};
+export const isLocal = detectEnv() === 'local';
 const stripUndefinedProps = (props) => {
     const propKeys = Object.keys(props);
     return propKeys.reduce((acc, key) => {

package/dist/utils/deprecated.js.map

@@ -1 +1 @@
-{"version":3,"file":"deprecated.js","sourceRoot":"","sources":["../../src/utils/deprecated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,MAAM,GAAG,GAAG,OAAO,CAAC,GAAG,CAAC,kBAAkB,IAAI,OAAO,CAAC,GAAG,CAAC,GAAG,CAAA;AAE7D,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,KAAK,OAAO,CAAA;AAEtC,MAAM,mBAAmB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC7D,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAEnC,OAAO,QAAQ,CAAC,MAAM,CAA0B,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;QAC3D,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE,CAAC;YAC7B,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;QACvB,CAAC;QACD,OAAO,GAAG,CAAA;IACZ,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC,CAAA;AASD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,OAAO,GAAG,IAAI,EACd,KAAK,EACL,OAAO,EACP,cAAc,GACa,EAAQ,EAAE;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;YACvB,MAAM,IAAI,GAAU;gBAClB,kBAAkB,KAAK,EAAE;gBACzB,mBAAmB;gBACnB,IAAI;gBACJ,IAAI;gBACJ,OAAO;aACR,CAAA;YAED,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CACP,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,mBAAmB,CAAC,cAAc,CAAC,CACpC,CAAA;YACH,CAAC;YAED,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAA;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC,CAAA","sourcesContent":["import { useEffect } from 'react'\n\nconst env = process.env.REACT_APP_NODE_ENV || process.env.ENV\n\nexport const isLocal = env === 'local'\n\nconst stripUndefinedProps = (props: Record<string, unknown>) => {\n  const propKeys = Object.keys(props)\n\n  return propKeys.reduce<Record<string, unknown>>((acc, key) => {\n    if (props[key] !== undefined) {\n      acc[key] = props[key]\n    }\n    return acc\n  }, {})\n}\n\ntype UseDeprecatedWarningParams = {\n  enabled?: boolean\n  title: string\n  message: string\n  componentProps?: Record<string, any>\n}\n\nexport const useDeprecatedWarning = ({\n  enabled = true,\n  title,\n  message,\n  componentProps,\n}: UseDeprecatedWarningParams): void => {\n  useEffect(() => {\n    if (isLocal && enabled) {\n      const logs: any[] = [\n        `%c[Deprecated] ${title}`,\n        'font-weight:bold;',\n        '\\n',\n        '\\n',\n        message,\n      ]\n\n      if (componentProps) {\n        logs.push(\n          '\\n',\n          '\\n',\n          'Component props:',\n          stripUndefinedProps(componentProps),\n        )\n      }\n\n      console.warn(...logs)\n    }\n  }, [enabled])\n}\n"]}
+{"version":3,"file":"deprecated.js","sourceRoot":"","sources":["../../src/utils/deprecated.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAIjC,MAAM,SAAS,GAAG,GAAe,EAAE;IACjC,MAAM,GAAG,GACP,CAAC,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,EAAE,GAAG,EAAE,kBAAkB,CAAC;QACpE,CAAC,OAAO,OAAO,KAAK,WAAW,IAAI,OAAO,EAAE,GAAG,EAAE,QAAQ,CAAC,CAAA;IAE5D,IAAI,GAAG,KAAK,aAAa,IAAI,GAAG,KAAK,YAAY,IAAI,GAAG,KAAK,OAAO;QAClE,OAAO,GAAG,CAAA;IACZ,OAAO,IAAI,CAAA;AACb,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,OAAO,GAAG,SAAS,EAAE,KAAK,OAAO,CAAA;AAE9C,MAAM,mBAAmB,GAAG,CAAC,KAA8B,EAAE,EAAE;IAC7D,MAAM,QAAQ,GAAG,MAAM,CAAC,IAAI,CAAC,KAAK,CAAC,CAAA;IAEnC,OAAO,QAAQ,CAAC,MAAM,CAA0B,CAAC,GAAG,EAAE,GAAG,EAAE,EAAE;QAC3D,IAAI,KAAK,CAAC,GAAG,CAAC,KAAK,SAAS,EAAE,CAAC;YAC7B,GAAG,CAAC,GAAG,CAAC,GAAG,KAAK,CAAC,GAAG,CAAC,CAAA;QACvB,CAAC;QACD,OAAO,GAAG,CAAA;IACZ,CAAC,EAAE,EAAE,CAAC,CAAA;AACR,CAAC,CAAA;AASD,MAAM,CAAC,MAAM,oBAAoB,GAAG,CAAC,EACnC,OAAO,GAAG,IAAI,EACd,KAAK,EACL,OAAO,EACP,cAAc,GACa,EAAQ,EAAE;IACrC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,IAAI,OAAO,EAAE,CAAC;YACvB,MAAM,IAAI,GAAU;gBAClB,kBAAkB,KAAK,EAAE;gBACzB,mBAAmB;gBACnB,IAAI;gBACJ,IAAI;gBACJ,OAAO;aACR,CAAA;YAED,IAAI,cAAc,EAAE,CAAC;gBACnB,IAAI,CAAC,IAAI,CACP,IAAI,EACJ,IAAI,EACJ,kBAAkB,EAClB,mBAAmB,CAAC,cAAc,CAAC,CACpC,CAAA;YACH,CAAC;YAED,OAAO,CAAC,IAAI,CAAC,GAAG,IAAI,CAAC,CAAA;QACvB,CAAC;IACH,CAAC,EAAE,CAAC,OAAO,CAAC,CAAC,CAAA;AACf,CAAC,CAAA","sourcesContent":["import { useEffect } from 'react'\n\ntype Env = 'development' | 'production' | 'local'\n\nconst detectEnv = (): Env | null => {\n  const env =\n    (typeof process !== 'undefined' && process?.env?.REACT_APP_NODE_ENV) ||\n    (typeof process !== 'undefined' && process?.env?.NODE_ENV)\n\n  if (env === 'development' || env === 'production' || env === 'local')\n    return env\n  return null\n}\n\nexport const isLocal = detectEnv() === 'local'\n\nconst stripUndefinedProps = (props: Record<string, unknown>) => {\n  const propKeys = Object.keys(props)\n\n  return propKeys.reduce<Record<string, unknown>>((acc, key) => {\n    if (props[key] !== undefined) {\n      acc[key] = props[key]\n    }\n    return acc\n  }, {})\n}\n\ntype UseDeprecatedWarningParams = {\n  enabled?: boolean\n  title: string\n  message: string\n  componentProps?: Record<string, any>\n}\n\nexport const useDeprecatedWarning = ({\n  enabled = true,\n  title,\n  message,\n  componentProps,\n}: UseDeprecatedWarningParams): void => {\n  useEffect(() => {\n    if (isLocal && enabled) {\n      const logs: any[] = [\n        `%c[Deprecated] ${title}`,\n        'font-weight:bold;',\n        '\\n',\n        '\\n',\n        message,\n      ]\n\n      if (componentProps) {\n        logs.push(\n          '\\n',\n          '\\n',\n          'Component props:',\n          stripUndefinedProps(componentProps),\n        )\n      }\n\n      console.warn(...logs)\n    }\n  }, [enabled])\n}\n"]}

package/dist/utils/flex.d.ts

@@ -1,7 +1,10 @@
+import { Theme } from '../ThemeProvider/ThemeProvider';
 import { ResponsiveProp } from './responsiveProp';
 import { SpacingProp } from './space';
 import { TransientProps } from './utilTypes';
-type FlexFN = (arg: TransientFlexProps) => string;
+type FlexFN = (arg: TransientFlexProps & {
+    theme: Theme;
+}) => string;
 export interface FlexProps {
     direction?: ResponsiveProp<'column' | 'column-reverse' | 'row' | 'row-reverse'>;
     wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';

package/dist/utils/flex.js

@@ -1,7 +1,7 @@
 import { resolveResponsiveProp } from './responsiveProp';
 import { resolveSpacing } from './space';
 export const flex = (props) => {
-    const { $flex, $direction, $wrap, $flow, $justifyContent, $alignItems, $alignContent, $gap, $columnGap, $rowGap, } = props;
+    const { $flex, $direction, $wrap, $flow, $justifyContent, $alignItems, $alignContent, $gap, $columnGap, $rowGap, theme, } = props;
     return `
     ${$flex ? `display: flex;` : ''}
     ${$direction
@@ -19,13 +19,13 @@ export const flex = (props) => {
         ? resolveResponsiveProp($alignContent, (value) => `align-content: ${value};`)
         : ''}
     ${$gap
-        ? resolveResponsiveProp($gap, (value) => `gap: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($gap, (value) => `gap: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$columnGap
-        ? resolveResponsiveProp($columnGap, (value) => `column-gap: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($columnGap, (value) => `column-gap: ${resolveSpacing(value, theme)};`)
         : ''}
     ${$rowGap
-        ? resolveResponsiveProp($rowGap, (value) => `row-gap: ${resolveSpacing(value)};`)
+        ? resolveResponsiveProp($rowGap, (value) => `row-gap: ${resolveSpacing(value, theme)};`)
         : ''}
   `;
 };

package/dist/utils/flex.js.map

@@ -1 +1 @@
-{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/utils/flex.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAkB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAA;AAuCrD,MAAM,CAAC,MAAM,IAAI,GAAW,CAAC,KAAyB,EAAE,EAAE;IACxD,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,eAAe,EACf,WAAW,EACX,aAAa,EACb,IAAI,EACJ,UAAU,EACV,OAAO,GACR,GAAG,KAAK,CAAA;IAET,OAAO;MACH,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;MAE7B,UAAU;QACR,CAAC,CAAC,qBAAqB,CACnB,UAAU,EACV,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,KAAK,GAAG,CACvC;QACH,CAAC,CAAC,EACN;MACE,KAAK,CAAC,CAAC,CAAC,cAAc,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MACnC,KAAK,CAAC,CAAC,CAAC,cAAc,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MAEnC,eAAe;QACb,CAAC,CAAC,qBAAqB,CACnB,eAAe,EACf,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB,KAAK,GAAG,CACxC;QACH,CAAC,CAAC,EACN;MAEE,WAAW;QACT,CAAC,CAAC,qBAAqB,CACnB,WAAW,EACX,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,KAAK,GAAG,CACpC;QACH,CAAC,CAAC,EACN;MAEE,aAAa;QACX,CAAC,CAAC,qBAAqB,CACnB,aAAa,EACb,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,KAAK,GAAG,CACtC;QACH,CAAC,CAAC,EACN;MAEE,IAAI;QACF,CAAC,CAAC,qBAAqB,CACnB,IAAI,EACJ,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,cAAc,CAAC,KAAK,CAAC,GAAG,CAC5C;QACH,CAAC,CAAC,EACN;MAEE,UAAU;QACR,CAAC,CAAC,qBAAqB,CACnB,UAAU,EACV,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,cAAc,CAAC,KAAK,CAAC,GAAG,CACnD;QACH,CAAC,CAAC,EACN;MAEE,OAAO;QACL,CAAC,CAAC,qBAAqB,CACnB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,cAAc,CAAC,KAAK,CAAC,GAAG,CAChD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { resolveResponsiveProp, ResponsiveProp } from './responsiveProp'\nimport { resolveSpacing, SpacingProp } from './space'\nimport { TransientProps } from './utilTypes'\n\ntype FlexFN = (arg: TransientFlexProps) => string\n\nexport interface FlexProps {\n  direction?: ResponsiveProp<\n    'column' | 'column-reverse' | 'row' | 'row-reverse'\n  >\n  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'\n  flex?: boolean\n  flow?: string\n  justifyContent?: ResponsiveProp<\n    | 'center'\n    | 'flex-end'\n    | 'flex-start'\n    | 'space-around'\n    | 'space-between'\n    | 'space-evenly'\n  >\n\n  alignItems?: ResponsiveProp<\n    'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'\n  >\n  alignContent?: ResponsiveProp<\n    | 'center'\n    | 'flex-end'\n    | 'flex-start'\n    | 'space-around'\n    | 'space-between'\n    | 'stretch'\n  >\n  gap?: ResponsiveProp<SpacingProp>\n  rowGap?: ResponsiveProp<SpacingProp>\n  columnGap?: ResponsiveProp<SpacingProp>\n}\n\nexport type TransientFlexProps = TransientProps<FlexProps>\n\nexport const flex: FlexFN = (props: TransientFlexProps) => {\n  const {\n    $flex,\n    $direction,\n    $wrap,\n    $flow,\n    $justifyContent,\n    $alignItems,\n    $alignContent,\n    $gap,\n    $columnGap,\n    $rowGap,\n  } = props\n\n  return `\n    ${$flex ? `display: flex;` : ''}\n    ${\n      $direction\n        ? resolveResponsiveProp(\n            $direction,\n            (value) => `flex-direction: ${value};`,\n          )\n        : ''\n    }\n    ${$wrap ? `flex-wrap: ${$wrap};` : ''}\n    ${$flow ? `flex-flow: ${$flow};` : ''}\n    ${\n      $justifyContent\n        ? resolveResponsiveProp(\n            $justifyContent,\n            (value) => `justify-content: ${value};`,\n          )\n        : ''\n    }\n    ${\n      $alignItems\n        ? resolveResponsiveProp(\n            $alignItems,\n            (value) => `align-items: ${value};`,\n          )\n        : ''\n    }\n    ${\n      $alignContent\n        ? resolveResponsiveProp(\n            $alignContent,\n            (value) => `align-content: ${value};`,\n          )\n        : ''\n    }\n    ${\n      $gap\n        ? resolveResponsiveProp(\n            $gap,\n            (value) => `gap: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $columnGap\n        ? resolveResponsiveProp(\n            $columnGap,\n            (value) => `column-gap: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n    ${\n      $rowGap\n        ? resolveResponsiveProp(\n            $rowGap,\n            (value) => `row-gap: ${resolveSpacing(value)};`,\n          )\n        : ''\n    }\n  `\n}\n"]}
+{"version":3,"file":"flex.js","sourceRoot":"","sources":["../../src/utils/flex.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,qBAAqB,EAAkB,MAAM,kBAAkB,CAAA;AACxE,OAAO,EAAE,cAAc,EAAe,MAAM,SAAS,CAAA;AAuCrD,MAAM,CAAC,MAAM,IAAI,GAAW,CAAC,KAAK,EAAE,EAAE;IACpC,MAAM,EACJ,KAAK,EACL,UAAU,EACV,KAAK,EACL,KAAK,EACL,eAAe,EACf,WAAW,EACX,aAAa,EACb,IAAI,EACJ,UAAU,EACV,OAAO,EACP,KAAK,GACN,GAAG,KAAK,CAAA;IAET,OAAO;MACH,KAAK,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,EAAE;MAE7B,UAAU;QACR,CAAC,CAAC,qBAAqB,CACnB,UAAU,EACV,CAAC,KAAK,EAAE,EAAE,CAAC,mBAAmB,KAAK,GAAG,CACvC;QACH,CAAC,CAAC,EACN;MACE,KAAK,CAAC,CAAC,CAAC,cAAc,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MACnC,KAAK,CAAC,CAAC,CAAC,cAAc,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE;MAEnC,eAAe;QACb,CAAC,CAAC,qBAAqB,CACnB,eAAe,EACf,CAAC,KAAK,EAAE,EAAE,CAAC,oBAAoB,KAAK,GAAG,CACxC;QACH,CAAC,CAAC,EACN;MAEE,WAAW;QACT,CAAC,CAAC,qBAAqB,CACnB,WAAW,EACX,CAAC,KAAK,EAAE,EAAE,CAAC,gBAAgB,KAAK,GAAG,CACpC;QACH,CAAC,CAAC,EACN;MAEE,aAAa;QACX,CAAC,CAAC,qBAAqB,CACnB,aAAa,EACb,CAAC,KAAK,EAAE,EAAE,CAAC,kBAAkB,KAAK,GAAG,CACtC;QACH,CAAC,CAAC,EACN;MAEE,IAAI;QACF,CAAC,CAAC,qBAAqB,CACnB,IAAI,EACJ,CAAC,KAAK,EAAE,EAAE,CAAC,QAAQ,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CACnD;QACH,CAAC,CAAC,EACN;MAEE,UAAU;QACR,CAAC,CAAC,qBAAqB,CACnB,UAAU,EACV,CAAC,KAAK,EAAE,EAAE,CAAC,eAAe,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CAC1D;QACH,CAAC,CAAC,EACN;MAEE,OAAO;QACL,CAAC,CAAC,qBAAqB,CACnB,OAAO,EACP,CAAC,KAAK,EAAE,EAAE,CAAC,YAAY,cAAc,CAAC,KAAK,EAAE,KAAK,CAAC,GAAG,CACvD;QACH,CAAC,CAAC,EACN;GACD,CAAA;AACH,CAAC,CAAA","sourcesContent":["import { Theme } from '../ThemeProvider/ThemeProvider'\nimport { resolveResponsiveProp, ResponsiveProp } from './responsiveProp'\nimport { resolveSpacing, SpacingProp } from './space'\nimport { TransientProps } from './utilTypes'\n\ntype FlexFN = (arg: TransientFlexProps & { theme: Theme }) => string\n\nexport interface FlexProps {\n  direction?: ResponsiveProp<\n    'column' | 'column-reverse' | 'row' | 'row-reverse'\n  >\n  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse'\n  flex?: boolean\n  flow?: string\n  justifyContent?: ResponsiveProp<\n    | 'center'\n    | 'flex-end'\n    | 'flex-start'\n    | 'space-around'\n    | 'space-between'\n    | 'space-evenly'\n  >\n\n  alignItems?: ResponsiveProp<\n    'baseline' | 'center' | 'flex-end' | 'flex-start' | 'stretch'\n  >\n  alignContent?: ResponsiveProp<\n    | 'center'\n    | 'flex-end'\n    | 'flex-start'\n    | 'space-around'\n    | 'space-between'\n    | 'stretch'\n  >\n  gap?: ResponsiveProp<SpacingProp>\n  rowGap?: ResponsiveProp<SpacingProp>\n  columnGap?: ResponsiveProp<SpacingProp>\n}\n\nexport type TransientFlexProps = TransientProps<FlexProps>\n\nexport const flex: FlexFN = (props) => {\n  const {\n    $flex,\n    $direction,\n    $wrap,\n    $flow,\n    $justifyContent,\n    $alignItems,\n    $alignContent,\n    $gap,\n    $columnGap,\n    $rowGap,\n    theme,\n  } = props\n\n  return `\n    ${$flex ? `display: flex;` : ''}\n    ${\n      $direction\n        ? resolveResponsiveProp(\n            $direction,\n            (value) => `flex-direction: ${value};`,\n          )\n        : ''\n    }\n    ${$wrap ? `flex-wrap: ${$wrap};` : ''}\n    ${$flow ? `flex-flow: ${$flow};` : ''}\n    ${\n      $justifyContent\n        ? resolveResponsiveProp(\n            $justifyContent,\n            (value) => `justify-content: ${value};`,\n          )\n        : ''\n    }\n    ${\n      $alignItems\n        ? resolveResponsiveProp(\n            $alignItems,\n            (value) => `align-items: ${value};`,\n          )\n        : ''\n    }\n    ${\n      $alignContent\n        ? resolveResponsiveProp(\n            $alignContent,\n            (value) => `align-content: ${value};`,\n          )\n        : ''\n    }\n    ${\n      $gap\n        ? resolveResponsiveProp(\n            $gap,\n            (value) => `gap: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $columnGap\n        ? resolveResponsiveProp(\n            $columnGap,\n            (value) => `column-gap: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n    ${\n      $rowGap\n        ? resolveResponsiveProp(\n            $rowGap,\n            (value) => `row-gap: ${resolveSpacing(value, theme)};`,\n          )\n        : ''\n    }\n  `\n}\n"]}

package/dist/utils/space.d.ts

@@ -1,10 +1,13 @@
+import { Theme } from '../ThemeProvider/ThemeProvider';
+import { Flatten, Prettify } from '../types';
 import { ResponsiveProp } from './responsiveProp';
 import { TransientProps } from './utilTypes';
-type Spacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px';
-export type SpacingProp = '0' | Spacing | {
+type LegacySpacing = '8px' | '12px' | '16px' | '24px' | '32px' | '48px' | '64px';
+export type ThemeSpacing = Prettify<Flatten<Pick<Theme, 'space'>>>;
+export type SpacingProp = '0' | LegacySpacing | ThemeSpacing | {
     custom: number | string;
 };
-export declare const resolveSpacing: (value: SpacingProp | "auto") => string;
+export declare const resolveSpacing: (value: SpacingProp | "auto", theme?: Theme) => string;
 export interface MarginProps {
     m?: ResponsiveProp<SpacingProp>;
     mx?: ResponsiveProp<SpacingProp | 'auto'>;
@@ -25,6 +28,10 @@ export interface PaddingProps {
 }
 export type TransientMarginProps = TransientProps<MarginProps>;
 export type TransientPaddingProps = TransientProps<PaddingProps>;
-export declare const margin: (props: TransientMarginProps) => string;
-export declare const padding: (props: TransientPaddingProps) => string;
+export declare const margin: (props: TransientMarginProps & {
+    theme: Theme;
+}) => string;
+export declare const padding: (props: TransientPaddingProps & {
+    theme: Theme;
+}) => string;
 export {};