@mrshmllw/smores-react 6.0.0 → 6.0.1

package/dist/RadioGroup/RadioElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioElement.js","sources":["../../src/RadioGroup/RadioElement.tsx"],"sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\nimport { visuallyHidden } from '../utils/visuallyHidden'\n\nimport { Box } from '../Box'\nimport { BaseValueType } from './types'\n\ntype RadioElementProps = {\n  name: string\n  id: string\n  value: BaseValueType\n  checked: boolean\n  onChange: (value: BaseValueType) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  isError: boolean\n} & MarginProps\n\nexport const RadioElement = forwardRef<HTMLInputElement, RadioElementProps>(\n  function RadioElement(\n    { name, id, value, checked, onChange, onBlur, isError, ...marginProps },\n    ref,\n  ) {\n    return (\n      <>\n        <StyledInput\n          ref={ref}\n          type=\"radio\"\n          name={name}\n          id={id}\n          value={`${value}`}\n          checked={checked}\n          onChange={() => onChange(value)}\n          onBlur={onBlur}\n        />\n        <RadioCircle isError={isError} checked={checked} {...marginProps} />\n      </>\n    )\n  },\n)\n\nconst StyledInput = styled.input`\n  ${visuallyHidden}\n`\n\nconst RADIO_SIZE = 24\n\nconst RadioCircle = styled(Box)<{ isError: boolean; checked: boolean }>`\n  flex-shrink: 0;\n  width: ${RADIO_SIZE}px;\n  height: ${RADIO_SIZE}px;\n  border-radius: ${RADIO_SIZE}px;\n  background-color: ${theme.colors.cream};\n  border: 2px solid\n    ${({ isError }) =>\n      isError ? theme.colors.strawberry : theme.colors.sesame};\n\n  ${({ checked, isError }) =>\n    !checked &&\n    !isError &&\n    `\n    &:hover {\n      border: 2px solid ${theme.colors.liquorice};\n    }\n  `}\n\n  ${({ checked, isError }) =>\n    checked &&\n    `border: 8px solid ${\n      isError ? theme.colors.strawberry : theme.colors.liquorice\n    };`}\n\n  ${focusOutline({ selector: `${StyledInput}:focus-visible + &` })}\n`\n"],"names":["RadioElement"],"mappings":";;;;;;;;AAqBO,MAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,SAASA,aAAAA,CACP,EAAE,IAAA,EAAM,EAAI,EAAA,KAAA,EAAO,OAAS,EAAA,QAAA,EAAU,MAAQ,EAAA,OAAA,EAAS,GAAG,WAAA,IAC1D,GACA,EAAA;AACA,IAAA,uBAEI,IAAA,CAAA,QAAA,EAAA,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,WAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAK,EAAA,OAAA;AAAA,UACL,IAAA;AAAA,UACA,EAAA;AAAA,UACA,KAAA,EAAO,GAAG,KAAK,CAAA,CAAA;AAAA,UACf,OAAA;AAAA,UACA,QAAA,EAAU,MAAM,QAAA,CAAS,KAAK,CAAA;AAAA,UAC9B,MAAA;AAAA,SAAA;AAAA,OACF;AAAA,sBACC,GAAA,CAAA,WAAA,EAAA,EAAY,OAAkB,EAAA,OAAA,EAAmB,GAAG,WAAa,EAAA,CAAA;AAAA,KACpE,EAAA,CAAA,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,MAAM,cAAc,MAAO,CAAA,KAAA,CAAA;AAAA,EAAA,EACvB,cAAc,CAAA;AAAA,CAAA,CAAA;AAGlB,MAAM,UAAa,GAAA,EAAA,CAAA;AAEnB,MAAM,WAAA,GAAc,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA,SAAA,EAEnB,UAAU,CAAA;AAAA,UAAA,EACT,UAAU,CAAA;AAAA,iBAAA,EACH,UAAU,CAAA;AAAA,oBACP,EAAA,KAAA,CAAM,OAAO,KAAK,CAAA;AAAA;AAAA,IAElC,EAAA,CAAC,EAAE,OAAA,EACH,KAAA,OAAA,GAAU,MAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAEzD,EAAA,CAAC,EAAE,OAAS,EAAA,OAAA,OACZ,CAAC,OAAA,IACD,CAAC,OACD,IAAA,CAAA;AAAA;AAAA,wBAEsB,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;AAAA,EAE7C,CAAA,CAAA;AAAA;AAAA,EAAA,EAEC,CAAC,EAAE,OAAS,EAAA,OAAA,OACZ,OACA,IAAA,CAAA,kBAAA,EACE,OAAU,GAAA,KAAA,CAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,SACnD,CAAG,CAAA,CAAA,CAAA;AAAA;AAAA,EAAA,EAEH,aAAa,EAAE,QAAA,EAAU,GAAG,WAAW,CAAA,kBAAA,CAAA,EAAsB,CAAC,CAAA;AAAA,CAAA;;;;"}

package/dist/RadioGroup/RadioGroup.js

@@ -73,3 +73,4 @@ const RadioItemList = styled.div`
 `;
 
 export { RadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/dist/RadioGroup/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../src/RadioGroup/RadioGroup.tsx"],"sourcesContent":["import React, {\n  FocusEvent,\n  ForwardedRef,\n  forwardRef,\n  ReactElement,\n  RefObject,\n  useImperativeHandle,\n  useRef,\n} from 'react'\nimport styled from 'styled-components'\n\nimport { useUniqueId } from '../utils/id'\n\nimport { Icons } from 'Icon/iconsList'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Fieldset } from '../fields/Fieldset'\n\nimport { ITEM_GAP } from './constants'\nimport { RadioItem } from './RadioItem'\nimport { BaseValueType, DisplayType, IconPosition } from './types'\n\nexport type RadioGroupProps<Value extends BaseValueType = BaseValueType> = {\n  options: Array<{\n    visual?: string\n    icon?: Icons\n    iconPosition?: IconPosition\n    label: string\n    value: Value\n    bodyCopy?: string\n  }>\n  onChange: (value: Value) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  value: Value\n  displayType?: DisplayType\n  fallbackStyle?: boolean\n} & CommonFieldProps\n\nexport type RadioGroupElement = {\n  focus: VoidFunction\n}\n\nconst RadioGroupComponent = <Value extends BaseValueType>(\n  {\n    options,\n    onChange,\n    onBlur,\n    value,\n    displayType = 'normal',\n    renderAsTitle = false,\n    error = false,\n    fallbackStyle = false,\n    ...fieldProps\n  }: RadioGroupProps<Value>,\n  ref: ForwardedRef<RadioGroupElement>,\n) => {\n  const name = useUniqueId()\n\n  const optionRefs = useRef<RefObject<HTMLInputElement>[]>([])\n  useImperativeHandle(ref, () => {\n    return {\n      focus: () => {\n        const selectedIndex = options.findIndex((item) => item.value === value)\n\n        const elementToFocus = selectedIndex === -1 ? 0 : selectedIndex\n        optionRefs.current[elementToFocus].current?.focus()\n      },\n    }\n  })\n\n  return (\n    <Fieldset renderAsTitle={renderAsTitle} error={error} {...fieldProps}>\n      <RadioItemList displayType={displayType}>\n        {options.map((option, index) => {\n          const isSelected = option.value === value\n\n          return (\n            <RadioItem\n              ref={(radioOptionRef) => {\n                optionRefs.current[index] = {\n                  current: radioOptionRef,\n                }\n              }}\n              key={`${option.value}`}\n              name={name}\n              visual={option.visual}\n              icon={option.icon}\n              iconPosition={option.iconPosition}\n              label={option.label}\n              value={option.value}\n              checked={isSelected}\n              onChange={onChange}\n              onBlur={onBlur}\n              displayType={displayType}\n              isError={error}\n              fallbackStyle={fallbackStyle}\n              bodyCopy={option.bodyCopy}\n            />\n          )\n        })}\n      </RadioItemList>\n    </Fieldset>\n  )\n}\n\nexport const RadioGroup = forwardRef(RadioGroupComponent) as <\n  Value extends BaseValueType = BaseValueType,\n>(\n  p: RadioGroupProps<Value> & React.RefAttributes<HTMLInputElement>,\n) => ReactElement | null\n\nconst RadioItemList = styled.div<Pick<RadioGroupProps, 'displayType'>>`\n  display: flex;\n  gap: ${ITEM_GAP}px;\n\n  ${({ displayType }) => {\n    if (displayType === 'horizontal-card') {\n      return `\n        flex-direction: row;\n        flex-wrap: wrap;\n      `\n    }\n\n    return `flex-direction: column;`\n  }}\n`\n"],"names":[],"mappings":";;;;;;;;AAyCA,MAAM,sBAAsB,CAC1B;AAAA,EACE,OAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAc,GAAA,QAAA;AAAA,EACd,aAAgB,GAAA,KAAA;AAAA,EAChB,KAAQ,GAAA,KAAA;AAAA,EACR,aAAgB,GAAA,KAAA;AAAA,EAChB,GAAG,UAAA;AACL,CAAA,EACA,GACG,KAAA;AACH,EAAA,MAAM,OAAO,WAAY,EAAA,CAAA;AAEzB,EAAM,MAAA,UAAA,GAAa,MAAsC,CAAA,EAAE,CAAA,CAAA;AAC3D,EAAA,mBAAA,CAAoB,KAAK,MAAM;AAC7B,IAAO,OAAA;AAAA,MACL,OAAO,MAAM;AACX,QAAA,MAAM,gBAAgB,OAAQ,CAAA,SAAA,CAAU,CAAC,IAAS,KAAA,IAAA,CAAK,UAAU,KAAK,CAAA,CAAA;AAEtE,QAAM,MAAA,cAAA,GAAiB,aAAkB,KAAA,CAAA,CAAA,GAAK,CAAI,GAAA,aAAA,CAAA;AAClD,QAAA,UAAA,CAAW,OAAQ,CAAA,cAAc,CAAE,CAAA,OAAA,EAAS,KAAM,EAAA,CAAA;AAAA,OACpD;AAAA,KACF,CAAA;AAAA,GACD,CAAA,CAAA;AAED,EAAA,uBACG,GAAA,CAAA,QAAA,EAAA,EAAS,aAA8B,EAAA,KAAA,EAAe,GAAG,UAAA,EACxD,QAAC,kBAAA,GAAA,CAAA,aAAA,EAAA,EAAc,WACZ,EAAA,QAAA,EAAA,OAAA,CAAQ,GAAI,CAAA,CAAC,QAAQ,KAAU,KAAA;AAC9B,IAAM,MAAA,UAAA,GAAa,OAAO,KAAU,KAAA,KAAA,CAAA;AAEpC,IACE,uBAAA,GAAA;AAAA,MAAC,SAAA;AAAA,MAAA;AAAA,QACC,GAAA,EAAK,CAAC,cAAmB,KAAA;AACvB,UAAW,UAAA,CAAA,OAAA,CAAQ,KAAK,CAAI,GAAA;AAAA,YAC1B,OAAS,EAAA,cAAA;AAAA,WACX,CAAA;AAAA,SACF;AAAA,QAEA,IAAA;AAAA,QACA,QAAQ,MAAO,CAAA,MAAA;AAAA,QACf,MAAM,MAAO,CAAA,IAAA;AAAA,QACb,cAAc,MAAO,CAAA,YAAA;AAAA,QACrB,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,OAAO,MAAO,CAAA,KAAA;AAAA,QACd,OAAS,EAAA,UAAA;AAAA,QACT,QAAA;AAAA,QACA,MAAA;AAAA,QACA,WAAA;AAAA,QACA,OAAS,EAAA,KAAA;AAAA,QACT,aAAA;AAAA,QACA,UAAU,MAAO,CAAA,QAAA;AAAA,OAAA;AAAA,MAbZ,CAAA,EAAG,OAAO,KAAK,CAAA,CAAA;AAAA,KActB,CAAA;AAAA,GAEH,GACH,CACF,EAAA,CAAA,CAAA;AAEJ,CAAA,CAAA;AAEa,MAAA,UAAA,GAAa,WAAW,mBAAmB,EAAA;AAMxD,MAAM,gBAAgB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA,OAAA,EAEpB,QAAQ,CAAA;AAAA;AAAA,EAEb,EAAA,CAAC,EAAE,WAAA,EAAkB,KAAA;AACrB,EAAA,IAAI,gBAAgB,iBAAmB,EAAA;AACrC,IAAO,OAAA,CAAA;AAAA;AAAA;AAAA,MAAA,CAAA,CAAA;AAAA,GAIT;AAEA,EAAO,OAAA,CAAA,uBAAA,CAAA,CAAA;AACT,CAAC,CAAA;AAAA,CAAA;;;;"}

package/dist/RadioGroup/RadioItem.js

@@ -127,3 +127,4 @@ const RadioText = styled.span`
 `;
 
 export { RadioItem };
+//# sourceMappingURL=RadioItem.js.map

package/dist/RadioGroup/RadioItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioItem.js","sources":["../../src/RadioGroup/RadioItem.tsx"],"sourcesContent":["import React, { FocusEvent, forwardRef } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\n\nimport { Icons } from 'Icon/iconsList'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\n\nimport { Text } from '../Text'\nimport { RadioElement } from './RadioElement'\nimport { ITEM_GAP } from './constants'\nimport { BaseValueType, DisplayType, IconPosition } from './types'\n\ntype RadioItemProps = {\n  name: string\n  visual?: string\n  icon?: Icons\n  iconPosition?: IconPosition\n  value: BaseValueType\n  label: string\n  checked: boolean\n  onChange: (value: BaseValueType) => void\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  displayType: DisplayType\n  isError: boolean\n  fallbackStyle?: boolean\n  bodyCopy?: string\n}\n\nexport const RadioItem = forwardRef<HTMLInputElement, RadioItemProps>(\n  function RadioItem(\n    {\n      name,\n      visual,\n      icon,\n      iconPosition = 'center',\n      label,\n      value,\n      checked,\n      onChange,\n      onBlur,\n      displayType,\n      isError,\n      fallbackStyle,\n      bodyCopy,\n    },\n    ref,\n  ) {\n    const id = useUniqueId()\n    return (\n      <Wrapper\n        htmlFor={id}\n        checked={checked}\n        displayType={displayType}\n        data-testid={value}\n        isError={isError}\n        fallbackStyle={fallbackStyle}\n      >\n        {visual && !icon && (\n          <VisualWrapper>\n            <Visual visualUrl={visual} />\n          </VisualWrapper>\n        )}\n        {!visual && icon && (\n          <IconWrapper iconPosition={iconPosition}>\n            <Icon render={icon} size={24} />\n          </IconWrapper>\n        )}\n        <Box flex alignItems=\"center\">\n          <RadioElement\n            ref={ref}\n            name={name}\n            id={id}\n            value={value}\n            checked={checked}\n            onChange={onChange}\n            onBlur={onBlur}\n            isError={isError}\n            mr=\"8px\"\n          />\n          <Box>\n            <RadioText isError={isError}>{label}</RadioText>\n            {bodyCopy && (\n              <Box>\n                <Text typo=\"caption\">{bodyCopy}</Text>\n              </Box>\n            )}\n          </Box>\n        </Box>\n      </Wrapper>\n    )\n  },\n)\n\nconst VisualWrapper = styled.div`\n  width: 100%;\n  max-width: 120px;\n  margin: 0 auto 8px;\n`\n\nconst IconWrapper = styled.div<{ iconPosition?: IconPosition }>`\n  display: flex;\n  padding-bottom: 12px;\n\n  ${({ iconPosition }) =>\n    iconPosition === 'center' &&\n    css`\n      justify-content: center;\n    `}\n\n  ${({ iconPosition }) =>\n    iconPosition === 'start' &&\n    css`\n      justify-content: flex-start;\n    `}\n`\n\nconst Visual = styled.div<{ visualUrl: string }>`\n  width: 100%;\n  padding-top: 100%;\n  background-image: url('${(p) => p.visualUrl}');\n  background-size: contain;\n  background-repeat: no-repeat;\n  background-position: center;\n`\n\nconst Wrapper = styled.label<\n  Pick<RadioItemProps, 'displayType' | 'checked' | 'isError' | 'fallbackStyle'>\n>`\n  display: flex;\n  flex-direction: column;\n  cursor: pointer;\n\n  ${({ displayType, checked, isError, fallbackStyle }) => css`\n    ${(displayType === 'horizontal-card' || displayType === 'vertical-card') &&\n    css`\n      border-radius: 12px;\n      background-color: ${fallbackStyle\n        ? theme.colors.cream\n        : theme.colors.custard};\n      padding: ${checked ? '10px' : '12px'};\n      border: ${checked &&\n      (isError\n        ? `2px solid ${theme.colors.strawberry}`\n        : `2px solid ${theme.colors.liquorice}`)};\n\n      &:hover {\n        background-color: ${fallbackStyle\n          ? theme.colors.coconut\n          : theme.colors.oatmeal};\n      }\n    `}\n    ${displayType === 'horizontal-card' &&\n    css`\n      width: 100%;\n      justify-content: center;\n\n      @media (min-width: 420px) {\n        width: calc(50% - ${ITEM_GAP / 2}px);\n      }\n\n      @media (min-width: 768px) {\n        width: 201px;\n      }\n    `}\n  `}\n`\n\nconst RadioText = styled.span<{ isError: boolean }>`\n  line-height: 16px;\n  font-size: 16px;\n  font-weight: ${theme.font.weight.medium};\n  color: ${({ isError }) =>\n    isError ? theme.colors.strawberry : theme.colors.liquorice};\n  margin-top: 4px;\n`\n"],"names":["RadioItem"],"mappings":";;;;;;;;;;;AA+BO,MAAM,SAAY,GAAA,UAAA;AAAA,EACvB,SAASA,UACP,CAAA;AAAA,IACE,IAAA;AAAA,IACA,MAAA;AAAA,IACA,IAAA;AAAA,IACA,YAAe,GAAA,QAAA;AAAA,IACf,KAAA;AAAA,IACA,KAAA;AAAA,IACA,OAAA;AAAA,IACA,QAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,OAAA;AAAA,IACA,aAAA;AAAA,IACA,QAAA;AAAA,KAEF,GACA,EAAA;AACA,IAAA,MAAM,KAAK,WAAY,EAAA,CAAA;AACvB,IACE,uBAAA,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAS,EAAA,EAAA;AAAA,QACT,OAAA;AAAA,QACA,WAAA;AAAA,QACA,aAAa,EAAA,KAAA;AAAA,QACb,OAAA;AAAA,QACA,aAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAU,MAAA,IAAA,CAAC,wBACT,GAAA,CAAA,aAAA,EAAA,EACC,8BAAC,MAAO,EAAA,EAAA,SAAA,EAAW,QAAQ,CAC7B,EAAA,CAAA;AAAA,UAED,CAAC,MAAA,IAAU,IACV,oBAAA,GAAA,CAAC,WAAY,EAAA,EAAA,YAAA,EACX,QAAC,kBAAA,GAAA,CAAA,IAAA,EAAA,EAAK,MAAQ,EAAA,IAAA,EAAM,IAAM,EAAA,EAAA,EAAI,CAChC,EAAA,CAAA;AAAA,0BAED,IAAA,CAAA,GAAA,EAAA,EAAI,IAAI,EAAA,IAAA,EAAC,YAAW,QACnB,EAAA,QAAA,EAAA;AAAA,4BAAA,GAAA;AAAA,cAAC,YAAA;AAAA,cAAA;AAAA,gBACC,GAAA;AAAA,gBACA,IAAA;AAAA,gBACA,EAAA;AAAA,gBACA,KAAA;AAAA,gBACA,OAAA;AAAA,gBACA,QAAA;AAAA,gBACA,MAAA;AAAA,gBACA,OAAA;AAAA,gBACA,EAAG,EAAA,KAAA;AAAA,eAAA;AAAA,aACL;AAAA,iCACC,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,8BAAC,GAAA,CAAA,SAAA,EAAA,EAAU,SAAmB,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,cACnC,QAAA,wBACE,GACC,EAAA,EAAA,QAAA,kBAAA,GAAA,CAAC,QAAK,IAAK,EAAA,SAAA,EAAW,oBAAS,CACjC,EAAA,CAAA;AAAA,aAEJ,EAAA,CAAA;AAAA,WACF,EAAA,CAAA;AAAA,SAAA;AAAA,OAAA;AAAA,KACF,CAAA;AAAA,GAEJ;AACF,EAAA;AAEA,MAAM,gBAAgB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAM7B,MAAM,cAAc,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAIvB,CAAC,EAAE,YAAa,EAAA,KAChB,iBAAiB,QACjB,IAAA,GAAA,CAAA;AAAA;AAAA,IAEC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,YAAa,EAAA,KAChB,iBAAiB,OACjB,IAAA,GAAA,CAAA;AAAA;AAAA,IAEC,CAAA,CAAA;AAAA,CAAA,CAAA;AAGL,MAAM,SAAS,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA,yBAGK,EAAA,CAAC,CAAM,KAAA,CAAA,CAAE,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAM7C,MAAM,UAAU,MAAO,CAAA,KAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAOnB,CAAC,EAAE,WAAA,EAAa,OAAS,EAAA,OAAA,EAAS,eAAoB,KAAA,GAAA,CAAA;AAAA,IACnD,EAAA,CAAA,WAAA,KAAgB,iBAAqB,IAAA,WAAA,KAAgB,eACxD,KAAA,GAAA,CAAA;AAAA;AAAA,wBAAA,EAEsB,gBAChB,KAAM,CAAA,MAAA,CAAO,KACb,GAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,eACb,EAAA,OAAA,GAAU,SAAS,MAAM,CAAA;AAAA,cAC1B,EAAA,OAAA,KACT,OACG,GAAA,CAAA,UAAA,EAAa,KAAM,CAAA,MAAA,CAAO,UAAU,CAAA,CAAA,GACpC,CAAa,UAAA,EAAA,KAAA,CAAM,MAAO,CAAA,SAAS,CAAG,CAAA,CAAA,CAAA;AAAA;AAAA;AAAA,0BAAA,EAGpB,gBAChB,KAAM,CAAA,MAAA,CAAO,OACb,GAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA,IAE3B,CAAA,CAAA;AAAA,IAAA,EACC,gBAAgB,iBAClB,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAAA,EAKwB,WAAW,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAMnC,CAAA,CAAA;AAAA,EACF,CAAA,CAAA;AAAA,CAAA,CAAA;AAGH,MAAM,YAAY,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA,eAGR,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA,SAC9B,EAAA,CAAC,EAAE,OAAA,EACV,KAAA,OAAA,GAAU,MAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,SAAS,CAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/RadioGroup/constants.js

@@ -1,3 +1,4 @@
 const ITEM_GAP = 12;
 
 export { ITEM_GAP };
+//# sourceMappingURL=constants.js.map

package/dist/RadioGroup/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../src/RadioGroup/constants.ts"],"sourcesContent":["export const ITEM_GAP = 12\n"],"names":[],"mappings":"AAAO,MAAM,QAAW,GAAA;;;;"}

package/dist/Row/Row.js

@@ -89,3 +89,4 @@ const Container = styled(Box)(
 );
 
 export { Row };
+//# sourceMappingURL=Row.js.map

package/dist/Row/Row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Row.js","sources":["../../src/Row/Row.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Icons } from 'Icon/iconsList'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { MarginProps } from '../utils/space'\n\nexport type RowProps = {\n  iconLeft?: Icons\n  iconLeftColor?: Color\n  iconRight?: Icons\n  iconRightColor?: Color\n  handleClick?: () => void\n  heading: string\n  subHeading?: string\n  type?: 'first' | 'last' | 'curved'\n  borderTop?: boolean\n  borderBottom?: boolean\n  boldHeading?: boolean\n} & MarginProps\n\nexport const Row: FC<RowProps> = ({\n  iconLeft,\n  iconLeftColor = 'liquorice',\n  iconRight,\n  iconRightColor = 'marzipan',\n  handleClick,\n  heading,\n  subHeading,\n  type,\n  borderTop = true,\n  borderBottom = true,\n  boldHeading,\n  ...marginProps\n}) => {\n  const windowWidth = screen.width\n\n  return (\n    <Container\n      type={type}\n      iconLeft={iconLeft}\n      borderTop={borderTop}\n      borderBottom={borderBottom}\n      iconRight={iconRight}\n      onClick={handleClick}\n      boldHeading={boldHeading}\n      {...marginProps}\n    >\n      {iconLeft && (\n        <Icon\n          render={iconLeft}\n          size={windowWidth > 768 ? 24 : 18}\n          color={iconLeftColor}\n        />\n      )}\n      <Box>\n        <Text tag=\"h1\" typo=\"base\">\n          {heading}\n        </Text>\n        <Text tag=\"p\" typo=\"desc-small\" color=\"sesame\">\n          {subHeading}\n        </Text>\n      </Box>\n      {iconRight && (\n        <Icon\n          className=\"iconRight\"\n          render={iconRight}\n          size={24}\n          rotate={iconRight === 'caret' ? -90 : 0}\n          color={iconRightColor}\n        />\n      )}\n    </Container>\n  )\n}\n\ninterface IContainer {\n  type?: 'first' | 'last' | 'curved'\n  iconLeft?: string\n  iconRight?: string\n  borderTop: boolean\n  borderBottom: boolean\n  boldHeading?: boolean\n}\n\nconst Container = styled(Box)<IContainer>(\n  ({ type, iconLeft, borderTop, borderBottom, boldHeading }) => css`\n    border-radius: ${(type === 'first' && `16px 16px 0 0`) ||\n    (type === 'curved' && `16px`) ||\n    (type === 'last' && `0 0 16px 16px`) ||\n    0};\n\n    border-top: ${borderTop && type !== 'curved' && type !== 'first'\n      ? `1px solid ${theme.colors.oatmeal}`\n      : 'none'};\n    border-bottom: ${borderBottom && type !== 'curved' && type !== 'last'\n      ? `1px solid ${theme.colors.oatmeal}`\n      : 'none'};\n\n    background-color: ${theme.colors.custard};\n    display: grid;\n    grid-template-columns: ${iconLeft ? `24px auto 24px` : `auto 24px`};\n    padding: 16px;\n    grid-gap: 16px;\n    align-items: center;\n\n    cursor: pointer;\n\n    h1 {\n      font-weight: ${boldHeading && 500};\n    }\n\n    .iconRight {\n      justify-self: end;\n    }\n\n    @media (min-width: 768px) {\n      grid-gap: 24px;\n    }\n  `,\n)\n"],"names":[],"mappings":";;;;;;;AAwBO,MAAM,MAAoB,CAAC;AAAA,EAChC,QAAA;AAAA,EACA,aAAgB,GAAA,WAAA;AAAA,EAChB,SAAA;AAAA,EACA,cAAiB,GAAA,UAAA;AAAA,EACjB,WAAA;AAAA,EACA,OAAA;AAAA,EACA,UAAA;AAAA,EACA,IAAA;AAAA,EACA,SAAY,GAAA,IAAA;AAAA,EACZ,YAAe,GAAA,IAAA;AAAA,EACf,WAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAM,KAAA;AACJ,EAAA,MAAM,cAAc,MAAO,CAAA,KAAA,CAAA;AAE3B,EACE,uBAAA,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,IAAA;AAAA,MACA,QAAA;AAAA,MACA,SAAA;AAAA,MACA,YAAA;AAAA,MACA,SAAA;AAAA,MACA,OAAS,EAAA,WAAA;AAAA,MACT,WAAA;AAAA,MACC,GAAG,WAAA;AAAA,MAEH,QAAA,EAAA;AAAA,QACC,QAAA,oBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,MAAQ,EAAA,QAAA;AAAA,YACR,IAAA,EAAM,WAAc,GAAA,GAAA,GAAM,EAAK,GAAA,EAAA;AAAA,YAC/B,KAAO,EAAA,aAAA;AAAA,WAAA;AAAA,SACT;AAAA,6BAED,GACC,EAAA,EAAA,QAAA,EAAA;AAAA,0BAAA,GAAA,CAAC,IAAK,EAAA,EAAA,GAAA,EAAI,IAAK,EAAA,IAAA,EAAK,QACjB,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,0BACA,GAAA,CAAC,QAAK,GAAI,EAAA,GAAA,EAAI,MAAK,YAAa,EAAA,KAAA,EAAM,UACnC,QACH,EAAA,UAAA,EAAA,CAAA;AAAA,SACF,EAAA,CAAA;AAAA,QACC,SACC,oBAAA,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,SAAU,EAAA,WAAA;AAAA,YACV,MAAQ,EAAA,SAAA;AAAA,YACR,IAAM,EAAA,EAAA;AAAA,YACN,MAAA,EAAQ,SAAc,KAAA,OAAA,GAAU,CAAM,EAAA,GAAA,CAAA;AAAA,YACtC,KAAO,EAAA,cAAA;AAAA,WAAA;AAAA,SACT;AAAA,OAAA;AAAA,KAAA;AAAA,GAEJ,CAAA;AAEJ,EAAA;AAWA,MAAM,SAAA,GAAY,OAAO,GAAG,CAAA;AAAA,EAC1B,CAAC,EAAE,IAAA,EAAM,UAAU,SAAW,EAAA,YAAA,EAAc,aAAkB,KAAA,GAAA,CAAA;AAAA,mBAC1C,EAAA,IAAA,KAAS,WAAW,CACrC,aAAA,CAAA,IAAA,IAAA,KAAS,YAAY,CACrB,IAAA,CAAA,IAAA,IAAA,KAAS,MAAU,IAAA,CAAA,aAAA,CAAA,IACpB,CAAC,CAAA;AAAA;AAAA,gBAEa,EAAA,SAAA,IAAa,IAAS,KAAA,QAAA,IAAY,IAAS,KAAA,OAAA,GACrD,aAAa,KAAM,CAAA,MAAA,CAAO,OAAO,CAAA,CAAA,GACjC,MAAM,CAAA;AAAA,mBACO,EAAA,YAAA,IAAgB,IAAS,KAAA,QAAA,IAAY,IAAS,KAAA,MAAA,GAC3D,aAAa,KAAM,CAAA,MAAA,CAAO,OAAO,CAAA,CAAA,GACjC,MAAM,CAAA;AAAA;AAAA,sBAEU,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA,2BAEf,EAAA,QAAA,GAAW,mBAAmB,CAAW,SAAA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAA,EAQjD,eAAe,GAAG,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAWvC,CAAA;;;;"}

package/dist/SearchInput/SearchInput.js

@@ -117,3 +117,4 @@ const SearchInput = forwardRef(
 );
 
 export { SearchInput };
+//# sourceMappingURL=SearchInput.js.map

package/dist/SearchInput/SearchInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchInput.js","sources":["../../src/SearchInput/SearchInput.tsx"],"sourcesContent":["import React, {\n  ChangeEvent,\n  FocusEvent,\n  forwardRef,\n  useMemo,\n  useState,\n} from 'react'\nimport { Box } from '../Box'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Input, StyledFrontIcon } from '../fields/components/CommonInput'\nimport { useUniqueId } from '../utils/id'\nimport { useControllableState } from '../utils/useControlledState'\nimport { SearchOptions } from './SearchOptions'\n\nexport type SearchInputItem = {\n  label: string\n  value: string\n}\n\nexport interface SearchInputProps extends CommonFieldProps {\n  name?: string\n  placeholder?: string\n  searchList: SearchInputItem[]\n  onFound: (element: string) => void\n  showIcon?: boolean\n  onBlur?: (e: FocusEvent<HTMLInputElement>) => void\n  value?: string\n  resultsRelativePosition?: boolean\n  resultsBorder?: boolean\n}\n\nexport const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>(\n  function SearchInput(\n    {\n      id: idProp,\n      name = 'search_input',\n      className = '',\n      placeholder,\n      searchList,\n      showIcon = false,\n      renderAsTitle = false,\n      value,\n      onBlur,\n      onFound,\n      fallbackStyle,\n      resultsRelativePosition = false,\n      resultsBorder = true,\n      ...otherProps\n    },\n    ref,\n  ) {\n    const id = useUniqueId(idProp)\n    const [showOptions, setShowOptions] = useState(false)\n    const [selectedValue, setSelectedValue] = useControllableState<\n      string | null\n    >({\n      initialState: null,\n      stateProp: value,\n    })\n\n    const [searchQuery, setSearchQuery] = useState<string | null>(null)\n\n    const filteredList = useMemo(() => {\n      if (searchQuery === null || searchQuery === '') {\n        return searchList\n      }\n\n      return searchList.filter(({ label }) =>\n        label.toLowerCase().includes(searchQuery.toLocaleLowerCase()),\n      )\n    }, [searchQuery])\n\n    const getDisplayedInputText = () => {\n      if (searchQuery !== null) {\n        return searchQuery\n      }\n\n      if (selectedValue !== null) {\n        return (\n          searchList.find(\n            (option) =>\n              option.label === selectedValue || option.value === selectedValue,\n          )?.label || ''\n        )\n      }\n\n      return ''\n    }\n\n    const isSelected = selectedValue !== null\n    const displayedInputText = getDisplayedInputText()\n\n    const updateSearchQuery = (query: string | null) => {\n      setSearchQuery(query)\n\n      if (query === null) {\n        setShowOptions(false)\n      } else {\n        setShowOptions(2 <= query.length)\n      }\n    }\n\n    const handleInputChange = (event: ChangeEvent<HTMLInputElement>): void => {\n      const nextValue = event.currentTarget.value\n      updateSearchQuery(nextValue)\n    }\n\n    const handleSelect = (nextValue: SearchInputItem): void => {\n      updateSearchQuery(null)\n\n      setSelectedValue(nextValue.label)\n      onFound(nextValue.value)\n    }\n\n    return (\n      <Field\n        className={className}\n        renderAsTitle={renderAsTitle}\n        htmlFor={id}\n        {...otherProps}\n      >\n        <Box flex alignItems=\"center\" justifyContent=\"flex-start\">\n          {showIcon && <StyledFrontIcon render=\"search\" color=\"sesame\" />}\n          <Input\n            id={id}\n            name={name}\n            ref={ref}\n            placeholder={placeholder}\n            frontIcon={showIcon ? 'search' : undefined}\n            fallbackStyle={fallbackStyle}\n            autoComplete=\"off\"\n            value={displayedInputText}\n            onChange={handleInputChange}\n            selected={isSelected}\n            onBlur={(e) => {\n              if (displayedInputText === '') {\n                setSearchQuery(null)\n              }\n              onBlur?.(e)\n            }}\n          />\n        </Box>\n\n        {showOptions && (\n          <SearchOptions\n            displayedList={filteredList}\n            onSelect={handleSelect}\n            positionRelative={resultsRelativePosition}\n            resultsBorder={resultsBorder}\n          />\n        )}\n      </Field>\n    )\n  },\n)\n"],"names":["SearchInput"],"mappings":"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"}

package/dist/SearchInput/SearchOptions.js

@@ -61,3 +61,4 @@ const BoxWithPositionRelative = styled(Box)`
 `;
 
 export { SearchOptions };
+//# sourceMappingURL=SearchOptions.js.map

package/dist/SearchInput/SearchOptions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchOptions.js","sources":["../../src/SearchInput/SearchOptions.tsx"],"sourcesContent":["import { darken } from 'polished'\nimport React, { FC } from 'react'\nimport styled, { css } from 'styled-components'\nimport { Box } from '../Box'\nimport { theme } from '../theme'\n\ntype Option = {\n  label: string\n  value: string\n}\n\ntype SearchOptionsProps = {\n  displayedList: Array<Option>\n  onSelect: (option: Option) => void\n  positionRelative: boolean\n  resultsBorder: boolean\n}\n\nexport const SearchOptions: FC<SearchOptionsProps> = ({\n  displayedList,\n  onSelect,\n  positionRelative,\n  resultsBorder,\n}) => {\n  return (\n    <BoxWithPositionRelative>\n      <StyledResultsContainer positionRelative={positionRelative}>\n        <ResultsList resultsBorder={resultsBorder}>\n          {displayedList.length ? (\n            displayedList.map((el, i) => (\n              <li key={i} onClick={() => onSelect(el)}>\n                {el.label}\n              </li>\n            ))\n          ) : (\n            <li>No results</li>\n          )}\n        </ResultsList>\n      </StyledResultsContainer>\n    </BoxWithPositionRelative>\n  )\n}\n\nconst StyledResultsContainer = styled.div<\n  Pick<SearchOptionsProps, 'positionRelative'>\n>`\n  box-sizing: border-box;\n  overflow-y: hidden;\n  ${({ positionRelative }) => !positionRelative && 'position: absolute;'}\n  width: 100%;\n  left: 0px;\n  top: -8px;\n\n  ul {\n    max-height: 192px;\n  }\n`\n\nconst ResultsList = styled.ul<Pick<SearchOptionsProps, 'resultsBorder'>>`\n  position: relative;\n  list-style: none;\n  overflow-y: auto;\n  padding: 0;\n  margin: 0;\n  background-color: ${theme.colors.custard};\n  border-radius: 12px;\n  margin-top: 14px;\n  z-index: 1000;\n  ${({ resultsBorder }) =>\n    resultsBorder &&\n    css`\n      border: 2px solid ${theme.colors.oatmeal};\n    `}\n\n  li {\n    padding: 16px 14px;\n    box-sizing: border-box;\n    font-size: 16px;\n    color: ${theme.colors.liquorice};\n    cursor: pointer;\n\n    ${({ resultsBorder }) =>\n      resultsBorder && `border-bottom: 2px solid ${theme.colors.oatmeal};`}\n\n    &:last-child {\n      ${({ resultsBorder }) => resultsBorder && `border-bottom:none`}\n    }\n\n    &:hover {\n      background-color: ${darken(0.1, theme.colors.custard)};\n    }\n  }\n`\n\nconst BoxWithPositionRelative = styled(Box)`\n  position: relative;\n`\n"],"names":[],"mappings":";;;;;;AAkBO,MAAM,gBAAwC,CAAC;AAAA,EACpD,aAAA;AAAA,EACA,QAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AACF,CAAM,KAAA;AACJ,EAAA,uBACG,GAAA,CAAA,uBAAA,EAAA,EACC,QAAC,kBAAA,GAAA,CAAA,sBAAA,EAAA,EAAuB,kBACtB,QAAC,kBAAA,GAAA,CAAA,WAAA,EAAA,EAAY,aACV,EAAA,QAAA,EAAA,aAAA,CAAc,MACb,GAAA,aAAA,CAAc,GAAI,CAAA,CAAC,IAAI,CACrB,qBAAA,GAAA,CAAC,IAAW,EAAA,EAAA,OAAA,EAAS,MAAM,QAAA,CAAS,EAAE,CAAA,EACnC,aAAG,KADG,EAAA,EAAA,CAET,CACD,CAAA,mBAEA,GAAA,CAAA,IAAA,EAAA,EAAG,QAAU,EAAA,YAAA,EAAA,CAAA,EAElB,GACF,CACF,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,yBAAyB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA,EAAA,EAKlC,CAAC,EAAE,gBAAA,EAAuB,KAAA,CAAC,oBAAoB,qBAAqB,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAUxE,MAAM,cAAc,MAAO,CAAA,EAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAML,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAItC,CAAC,EAAE,aAAc,EAAA,KACjB,aACA,IAAA,GAAA,CAAA;AAAA,wBACsB,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,IACzC,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAMQ,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;AAAA;AAAA,IAG7B,EAAA,CAAC,EAAE,aAAc,EAAA,KACjB,iBAAiB,CAA4B,yBAAA,EAAA,KAAA,CAAM,MAAO,CAAA,OAAO,CAAG,CAAA,CAAA,CAAA;AAAA;AAAA;AAAA,MAAA,EAGlE,CAAC,EAAE,aAAc,EAAA,KAAM,iBAAiB,CAAoB,kBAAA,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,wBAAA,EAI1C,MAAO,CAAA,GAAA,EAAK,KAAM,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAK3D,MAAM,uBAAA,GAA0B,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/Snackbar/SnackbarContainer.js

@@ -61,3 +61,4 @@ const SnackbarWrapper = styled.div`
 `;
 
 export { SnackbarContainer, SnackbarContext, useSnackbarContext };
+//# sourceMappingURL=SnackbarContainer.js.map

package/dist/Snackbar/SnackbarContainer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarContainer.js","sources":["../../src/Snackbar/SnackbarContainer.tsx"],"sourcesContent":["import React, {\n  createContext,\n  FC,\n  useState,\n  useCallback,\n  ReactNode,\n  useContext,\n} from 'react'\nimport styled from 'styled-components'\nimport { SnackbarItem } from './SnackbarItem'\nimport { CreateSnack, Snackbar, SnackbarContextType } from './types'\n\nexport const SnackbarContext = createContext<SnackbarContextType>({\n  addSnackbar: () => {\n    throw new Error('Please add the SnackbarContainer to your application')\n  },\n})\n\nexport const useSnackbarContext = () => useContext(SnackbarContext)\n\nexport const SnackbarContainer: FC<{ children?: ReactNode }> = ({\n  children,\n}) => {\n  let snackbarId = 0\n  const [snackbars, setSnackbars] = useState<Snackbar[]>([])\n\n  // create snackbar unique ID\n  const newSnackId = useCallback(() => {\n    const newId = `MM_SNACKBAR_${snackbarId}`\n    snackbarId++\n    return newId\n  }, [snackbarId])\n\n  const addSnackbar = (snackbar: CreateSnack) => {\n    const newSnack = {\n      ...snackbar,\n      id: newSnackId(),\n    }\n    setSnackbars([...snackbars, newSnack])\n  }\n\n  const deleteSnackbar = (id: string) => {\n    setSnackbars(snackbars.filter((snackbar) => snackbar.id !== id))\n  }\n\n  return (\n    <SnackbarContext.Provider\n      value={{\n        addSnackbar,\n      }}\n    >\n      {children}\n      <SnackbarWrapper>\n        {snackbars.map((snackbar) => (\n          <SnackbarItem\n            key={snackbar.id}\n            {...snackbar}\n            deleteSnack={deleteSnackbar}\n          />\n        ))}\n      </SnackbarWrapper>\n    </SnackbarContext.Provider>\n  )\n}\n\nconst SnackbarWrapper = styled.div`\n  position: fixed;\n  bottom: 35px;\n  left: 0;\n  right: 0;\n  margin: 0 auto;\n  width: 90%;\n  max-width: 875px;\n  z-index: 1000;\n`\n"],"names":[],"mappings":";;;;;AAYO,MAAM,kBAAkB,aAAmC,CAAA;AAAA,EAChE,aAAa,MAAM;AACjB,IAAM,MAAA,IAAI,MAAM,sDAAsD,CAAA,CAAA;AAAA,GACxE;AACF,CAAC,EAAA;AAEY,MAAA,kBAAA,GAAqB,MAAM,UAAA,CAAW,eAAe,EAAA;AAE3D,MAAM,oBAAkD,CAAC;AAAA,EAC9D,QAAA;AACF,CAAM,KAAA;AACJ,EAAA,IAAI,UAAa,GAAA,CAAA,CAAA;AACjB,EAAA,MAAM,CAAC,SAAW,EAAA,YAAY,CAAI,GAAA,QAAA,CAAqB,EAAE,CAAA,CAAA;AAGzD,EAAM,MAAA,UAAA,GAAa,YAAY,MAAM;AACnC,IAAM,MAAA,KAAA,GAAQ,eAAe,UAAU,CAAA,CAAA,CAAA;AACvC,IAAA,UAAA,EAAA,CAAA;AACA,IAAO,OAAA,KAAA,CAAA;AAAA,GACT,EAAG,CAAC,UAAU,CAAC,CAAA,CAAA;AAEf,EAAM,MAAA,WAAA,GAAc,CAAC,QAA0B,KAAA;AAC7C,IAAA,MAAM,QAAW,GAAA;AAAA,MACf,GAAG,QAAA;AAAA,MACH,IAAI,UAAW,EAAA;AAAA,KACjB,CAAA;AACA,IAAA,YAAA,CAAa,CAAC,GAAG,SAAW,EAAA,QAAQ,CAAC,CAAA,CAAA;AAAA,GACvC,CAAA;AAEA,EAAM,MAAA,cAAA,GAAiB,CAAC,EAAe,KAAA;AACrC,IAAA,YAAA,CAAa,UAAU,MAAO,CAAA,CAAC,aAAa,QAAS,CAAA,EAAA,KAAO,EAAE,CAAC,CAAA,CAAA;AAAA,GACjE,CAAA;AAEA,EACE,uBAAA,IAAA;AAAA,IAAC,eAAgB,CAAA,QAAA;AAAA,IAAhB;AAAA,MACC,KAAO,EAAA;AAAA,QACL,WAAA;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA;AAAA,wBACA,GAAA,CAAA,eAAA,EAAA,EACE,QAAU,EAAA,SAAA,CAAA,GAAA,CAAI,CAAC,QACd,qBAAA,GAAA;AAAA,UAAC,YAAA;AAAA,UAAA;AAAA,YAEE,GAAG,QAAA;AAAA,YACJ,WAAa,EAAA,cAAA;AAAA,WAAA;AAAA,UAFR,QAAS,CAAA,EAAA;AAAA,SAIjB,CACH,EAAA,CAAA;AAAA,OAAA;AAAA,KAAA;AAAA,GACF,CAAA;AAEJ,EAAA;AAEA,MAAM,kBAAkB,MAAO,CAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/Snackbar/SnackbarItem.js

@@ -44,3 +44,4 @@ const UnderlinedText = styled(Text)`
 `;
 
 export { SnackbarItem };
+//# sourceMappingURL=SnackbarItem.js.map

package/dist/Snackbar/SnackbarItem.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SnackbarItem.js","sources":["../../src/Snackbar/SnackbarItem.tsx"],"sourcesContent":["import { Box } from '../Box'\nimport React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { Icon } from '../Icon'\nimport { theme } from '../theme'\nimport { Text } from '../Text'\nimport { Snackbar } from './types'\nimport { useTimeout } from '../hooks'\n\ninterface Props extends Snackbar {\n  deleteSnack: (id: string) => void\n}\n\nexport const SnackbarItem: FC<Props> = ({\n  autoCloseTime = 4,\n  id,\n  message,\n  leadingIcon,\n  canManuallyClose,\n  showCloseIcon,\n  deleteSnack,\n}) => {\n  useTimeout(() => deleteSnack(id), autoCloseTime * 1000)\n\n  return (\n    <SnackItem p=\"16px\" key={id} mt=\"16px\" flex justifyContent=\"space-between\">\n      <Box flex alignItems=\"center\">\n        {leadingIcon && (\n          <Icon mr=\"12px\" render={leadingIcon} size={24} color=\"mascarpone\" />\n        )}\n        <Text typo=\"desc-small\" color=\"mascarpone\">\n          {message}\n        </Text>\n      </Box>\n      {canManuallyClose && (\n        <CloseButton\n          onClick={() => deleteSnack(id)}\n          aria-label={`close snackbar ${message}`}\n        >\n          {showCloseIcon ? (\n            <Icon render=\"cross\" size={16} color=\"mascarpone\" />\n          ) : (\n            <UnderlinedText tag=\"span\" typo=\"desc-medium\" color=\"mascarpone\">\n              Dismiss\n            </UnderlinedText>\n          )}\n        </CloseButton>\n      )}\n    </SnackItem>\n  )\n}\n\nconst SnackItem = styled(Box)`\n  border-radius: 16px;\n  background-color: ${theme.colors.liquorice};\n`\n\nconst CloseButton = styled.button`\n  cursor: pointer;\n`\n\nconst UnderlinedText = styled(Text)`\n  text-decoration: underline;\n`\n"],"names":[],"mappings":";;;;;;;;;AAaO,MAAM,eAA0B,CAAC;AAAA,EACtC,aAAgB,GAAA,CAAA;AAAA,EAChB,EAAA;AAAA,EACA,OAAA;AAAA,EACA,WAAA;AAAA,EACA,gBAAA;AAAA,EACA,aAAA;AAAA,EACA,WAAA;AACF,CAAM,KAAA;AACJ,EAAA,UAAA,CAAW,MAAM,WAAA,CAAY,EAAE,CAAA,EAAG,gBAAgB,GAAI,CAAA,CAAA;AAEtD,EACE,uBAAA,IAAA,CAAC,aAAU,CAAE,EAAA,MAAA,EAAgB,IAAG,MAAO,EAAA,IAAA,EAAI,IAAC,EAAA,cAAA,EAAe,eACzD,EAAA,QAAA,EAAA;AAAA,oBAAA,IAAA,CAAC,GAAI,EAAA,EAAA,IAAA,EAAI,IAAC,EAAA,UAAA,EAAW,QAClB,EAAA,QAAA,EAAA;AAAA,MACC,WAAA,oBAAA,GAAA,CAAC,QAAK,EAAG,EAAA,MAAA,EAAO,QAAQ,WAAa,EAAA,IAAA,EAAM,EAAI,EAAA,KAAA,EAAM,YAAa,EAAA,CAAA;AAAA,0BAEnE,IAAK,EAAA,EAAA,IAAA,EAAK,YAAa,EAAA,KAAA,EAAM,cAC3B,QACH,EAAA,OAAA,EAAA,CAAA;AAAA,KACF,EAAA,CAAA;AAAA,IACC,gBACC,oBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,MAAM,WAAA,CAAY,EAAE,CAAA;AAAA,QAC7B,YAAA,EAAY,kBAAkB,OAAO,CAAA,CAAA;AAAA,QAEpC,0CACE,GAAA,CAAA,IAAA,EAAA,EAAK,QAAO,OAAQ,EAAA,IAAA,EAAM,IAAI,KAAM,EAAA,YAAA,EAAa,CAElD,mBAAA,GAAA,CAAC,kBAAe,GAAI,EAAA,MAAA,EAAO,MAAK,aAAc,EAAA,KAAA,EAAM,cAAa,QAEjE,EAAA,SAAA,EAAA,CAAA;AAAA,OAAA;AAAA,KAEJ;AAAA,GAAA,EAAA,EArBqB,EAuBzB,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,SAAA,GAAY,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA,oBAEN,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA,CAAA,CAAA;AAG5C,MAAM,cAAc,MAAO,CAAA,MAAA,CAAA;AAAA;AAAA,CAAA,CAAA;AAI3B,MAAM,cAAA,GAAiB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/Snackbar/hooks.js

@@ -6,3 +6,4 @@ const useSnackbar = () => {
 };
 
 export { useSnackbar };
+//# sourceMappingURL=hooks.js.map

package/dist/Snackbar/hooks.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../src/Snackbar/hooks.ts"],"sourcesContent":["import { useSnackbarContext } from './SnackbarContainer'\n\nexport const useSnackbar = () => {\n  const { addSnackbar } = useSnackbarContext()\n\n  return { addSnackbar }\n}\n"],"names":[],"mappings":";;AAEO,MAAM,cAAc,MAAM;AAC/B,EAAM,MAAA,EAAE,WAAY,EAAA,GAAI,kBAAmB,EAAA,CAAA;AAE3C,EAAA,OAAO,EAAE,WAAY,EAAA,CAAA;AACvB;;;;"}

package/dist/SupportMessage/SupportMessage.js

@@ -110,3 +110,4 @@ const Description = styled(Text)`
 `;
 
 export { SupportMessage };
+//# sourceMappingURL=SupportMessage.js.map

package/dist/SupportMessage/SupportMessage.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SupportMessage.js","sources":["../../src/SupportMessage/SupportMessage.tsx"],"sourcesContent":["import { darken } from 'polished'\nimport React, { FC, MouseEventHandler, ReactElement } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Icons } from 'Icon/iconsList'\nimport { Box } from '../Box'\nimport { Icon } from '../Icon'\n\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { isReactElement } from '../utils/isReactElement'\nimport { MarginProps } from '../utils/space'\n\ntype StylesItem = {\n  iconColor: Color\n  backgroundColor: string\n  hoverBackgroundColor: string\n  icon: Icons\n}\n\nconst styles: Record<SupportMessageType, StylesItem> = {\n  info: {\n    iconColor: 'liquorice',\n    backgroundColor: theme.colors.custard,\n    hoverBackgroundColor: darken(0.1, theme.colors.custard),\n    icon: 'info',\n  },\n  fallbackStyle: {\n    iconColor: 'liquorice',\n    backgroundColor: theme.colors.coconut,\n    hoverBackgroundColor: darken(0.1, theme.colors.coconut),\n    icon: 'info',\n  },\n  alert: {\n    iconColor: 'tangerine',\n    backgroundColor: theme.colors.sherbert,\n    hoverBackgroundColor: darken(0.1, theme.colors.sherbert),\n    icon: 'alert',\n  },\n  warning: {\n    iconColor: 'strawberry',\n    backgroundColor: theme.colors.watermelon,\n    hoverBackgroundColor: darken(0.1, theme.colors.watermelon),\n    icon: 'warning',\n  },\n  success: {\n    iconColor: 'apple',\n    backgroundColor: theme.colors.mint,\n    hoverBackgroundColor: darken(0.1, theme.colors.mint),\n    icon: 'included',\n  },\n}\n\ntype SupportMessageType =\n  | 'info'\n  | 'fallbackStyle'\n  | 'alert'\n  | 'warning'\n  | 'success'\n\nexport type SupportMessageProps = {\n  className?: string\n  description: string | ReactElement\n  onClick?: MouseEventHandler\n  type: SupportMessageType\n  title?: string\n} & MarginProps\n\nexport const SupportMessage: FC<SupportMessageProps> = ({\n  className,\n  description,\n  onClick,\n  type = 'info',\n  title,\n  ...marginProps\n}) => {\n  return (\n    <Wrapper\n      className={className}\n      type={type}\n      onClick={onClick}\n      {...marginProps}\n    >\n      <IconWrapper>\n        <Icon\n          size={20}\n          render={styles[type].icon}\n          color={styles[type].iconColor}\n        />\n      </IconWrapper>\n      <Box flex direction=\"column\" mx=\"8px\">\n        {title && <Title>{title}</Title>}\n        {isReactElement(description) ? (\n          <DescriptionBox>{description}</DescriptionBox>\n        ) : (\n          <Description tag=\"p\">{description}</Description>\n        )}\n      </Box>\n      {onClick && (\n        <Box ml={{ custom: 'auto' }}>\n          <Icon size={16} render=\"caret\" color=\"marzipan\" rotate={270} />\n        </Box>\n      )}\n    </Wrapper>\n  )\n}\n\ninterface IWrapper {\n  type: SupportMessageType\n  onClick?: MouseEventHandler\n}\n\nconst IconWrapper = styled(Box)`\n  align-self: flex-start;\n`\n\nconst Wrapper = styled(Box)<IWrapper>(\n  ({ type, onClick }) => css`\n    align-items: center;\n    background-color: ${styles[type].backgroundColor};\n    border-radius: 16px;\n    ${onClick && `cursor: pointer`};\n    padding: 12px;\n    display: flex;\n    width: 100%;\n\n    &:hover,\n    &:active {\n      ${onClick && `background-color: ${styles[type].hoverBackgroundColor};`};\n    }\n  `,\n)\n\nconst Title = styled.p`\n  font-size: 16px;\n  font-weight: ${theme.font.weight.medium};\n  color: ${theme.colors.liquorice};\n  line-height: 20.8px;\n  margin-bottom: 4px;\n`\n\nconst DescriptionBox = styled(Box)`\n  color: ${theme.colors.liquorice};\n  font-size: 14px;\n  line-height: 20px;\n`\n\nconst Description = styled(Text)`\n  color: ${theme.colors.liquorice};\n  font-size: 14px;\n  line-height: 20px;\n`\n"],"names":[],"mappings":"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"}

package/dist/Table/Table.js

@@ -72,3 +72,4 @@ const Table = ({
 };
 
 export { Table };
+//# sourceMappingURL=Table.js.map

package/dist/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.js","sources":["../../src/Table/Table.tsx"],"sourcesContent":["import React from 'react'\nimport { Text } from '../Text'\nimport { TableHeader } from './components/TableHeader'\nimport { TableRow } from './components/TableRow'\nimport { StyledCell, StyledTable } from './components/commonComponents'\nimport { TableProps } from './types'\n\n/**\n * A table component that displays data with various features such as expandable rows, striped rows, and fixed headers.\n *\n * Caveats:\n * - subRows should always have the same columns as the Parent table.\n * - stripedColor wont be applied to subRows or subTables.\n * - rowActions will always need an onClick, this will be automatically passed onto the ReactNode you place & will be selectable\n * - rows will scale depending on the cell content size\n * - using clickableRow with clickable cells, ensure you use e.stopPropagation in your cells onClick\n *\n * Improvements:\n * - It would be nice if we expandable logic inside this component, e.g the presence of certain props would automatically add this\n * -\n *\n * @template T - The type of data the table displays.\n * @property {T[]} data - Array of data to be displayed in the table.\n * @property {TableColumn<T>[]} columns - Array of columns to display in the table.\n * @property {boolean} [fixedHeader=false] - If true, the table header will be fixed/sticky.\n * @property {string} [headerHeight] - Sets the height of the header.\n * @property {function(T): boolean} [expandable] - A function to determine if a row is expandable.\n * @property {Color} [stripedColor] - If present, the table rows will have alternating colors.\n * @property {Color} [headerColor='mascarpone'] - The color for the table header.\n * @property {Color} [rowColor='custard'] - The default color for each table row.\n * @property {Color} [rowBorderColor='oatmeal'] - The default color for each table row border.\n * @property {ReactElement} [subTable] - A React element to show when a row is expanded.\n * @property {Object} [subRows] - Settings for sub rows.\n * @property {function(T): ReactElement} subRows.rows - Function that returns a React element for the sub row.\n * @property {boolean} [subRows.showOnExpand=false] - If true, the sub rows will only be shown when the row is expanded.\n * @property {RowAction<T>[]} [rowActions] - Array of actions that can be performed on each row.\n * @property {function<T>: void} [clickableRow] - Function to apply to a row, to make the entire row clickable, useful for navigation.\n * @property {string} [rowPadding] - The Y padding for each row.\n * @property {string} [columnPadding] - The X padding for each row.\n * @property {string} [noDataContent] - The text to show when there is no available data to map through.\n */\nexport const Table = <T extends object>({\n  columns,\n  data,\n  fixedHeader = true,\n  expandable,\n  subTable,\n  subRows,\n  headerHeight,\n  headerColor = 'mascarpone',\n  rowColor = 'custard',\n  stripedColor,\n  rowBorderColor = 'oatmeal',\n  rowActions,\n  clickableRow,\n  rowPadding,\n  columnPadding,\n  noDataContent,\n}: TableProps<T>) => {\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n  return (\n    <StyledTable>\n      <thead>\n        <TableHeader\n          columns={columns}\n          fixedHeader={fixedHeader}\n          headerHeight={headerHeight}\n          subTable={subTable}\n          headerColor={headerColor}\n          rowActions={rowActions}\n          columnPadding={columnPadding}\n          expandable={expandable}\n        />\n      </thead>\n      <tbody>\n        {data.length === 0 && (\n          <StyledCell\n            colSpan={expandSubProp}\n            rowPadding={rowPadding}\n            columnPadding={columnPadding}\n          >\n            {noDataContent ? (\n              noDataContent\n            ) : (\n              <Text align=\"center\">No available data</Text>\n            )}\n          </StyledCell>\n        )}\n        {data.length !== 0 &&\n          data.map((row, rowIndex) => (\n            <TableRow\n              key={rowIndex}\n              rowData={row}\n              rowIndex={rowIndex}\n              columns={columns}\n              rowActions={rowActions}\n              stripedColor={stripedColor}\n              subTable={subTable}\n              subRows={subRows}\n              rowColor={rowColor}\n              rowBorderColor={rowBorderColor}\n              rowPadding={rowPadding}\n              columnPadding={columnPadding}\n              expandable={expandable}\n              clickableRow={clickableRow}\n            />\n          ))}\n      </tbody>\n    </StyledTable>\n  )\n}\n"],"names":[],"mappings":";;;;;;AAyCO,MAAM,QAAQ,CAAmB;AAAA,EACtC,OAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAc,GAAA,IAAA;AAAA,EACd,UAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,YAAA;AAAA,EACA,WAAc,GAAA,YAAA;AAAA,EACd,QAAW,GAAA,SAAA;AAAA,EACX,YAAA;AAAA,EACA,cAAiB,GAAA,SAAA;AAAA,EACjB,UAAA;AAAA,EACA,YAAA;AAAA,EACA,UAAA;AAAA,EACA,aAAA;AAAA,EACA,aAAA;AACF,CAAqB,KAAA;AACnB,EAAA,MAAM,kBAAkB,UAAc,IAAA,UAAA,CAAA;AACtC,EAAA,MAAM,aAAgB,GAAA,eAAA,GAAkB,OAAQ,CAAA,MAAA,GAAS,IAAI,OAAQ,CAAA,MAAA,CAAA;AACrE,EAAA,4BACG,WACC,EAAA,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,OACC,EAAA,EAAA,QAAA,kBAAA,GAAA;AAAA,MAAC,WAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,WAAA;AAAA,QACA,YAAA;AAAA,QACA,QAAA;AAAA,QACA,WAAA;AAAA,QACA,UAAA;AAAA,QACA,aAAA;AAAA,QACA,UAAA;AAAA,OAAA;AAAA,KAEJ,EAAA,CAAA;AAAA,yBACC,OACE,EAAA,EAAA,QAAA,EAAA;AAAA,MAAA,IAAA,CAAK,WAAW,CACf,oBAAA,GAAA;AAAA,QAAC,UAAA;AAAA,QAAA;AAAA,UACC,OAAS,EAAA,aAAA;AAAA,UACT,UAAA;AAAA,UACA,aAAA;AAAA,UAEC,0BACC,aAEA,mBAAA,GAAA,CAAC,IAAK,EAAA,EAAA,KAAA,EAAM,UAAS,QAAiB,EAAA,mBAAA,EAAA,CAAA;AAAA,SAAA;AAAA,OAE1C;AAAA,MAED,KAAK,MAAW,KAAA,CAAA,IACf,KAAK,GAAI,CAAA,CAAC,KAAK,QACb,qBAAA,GAAA;AAAA,QAAC,QAAA;AAAA,QAAA;AAAA,UAEC,OAAS,EAAA,GAAA;AAAA,UACT,QAAA;AAAA,UACA,OAAA;AAAA,UACA,UAAA;AAAA,UACA,YAAA;AAAA,UACA,QAAA;AAAA,UACA,OAAA;AAAA,UACA,QAAA;AAAA,UACA,cAAA;AAAA,UACA,UAAA;AAAA,UACA,aAAA;AAAA,UACA,UAAA;AAAA,UACA,YAAA;AAAA,SAAA;AAAA,QAbK,QAAA;AAAA,OAeR,CAAA;AAAA,KACL,EAAA,CAAA;AAAA,GACF,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/Table/components/RowActions.js

@@ -96,3 +96,4 @@ const CaretIcon = styled(IconStrict)(
 );
 
 export { RowActions };
+//# sourceMappingURL=RowActions.js.map

package/dist/Table/components/RowActions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RowActions.js","sources":["../../../src/Table/components/RowActions.tsx"],"sourcesContent":["import React, { FormEvent } from 'react'\nimport styled from 'styled-components'\nimport { Box } from '../../Box'\nimport { Button } from '../../Button'\nimport { IconStrict } from '../../IconStrict'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { RowActionsProps } from '../types'\nimport { StyledCell } from './commonComponents'\n\nexport const RowActions = <T extends object>({\n  rowData,\n  rowActions,\n  expandable,\n  isExpanded,\n  toggleExpansion,\n}: RowActionsProps<T>) => {\n  const handleAction = (\n    e: MouseEvent | FormEvent<HTMLButtonElement>,\n    action: (rowData: T) => void,\n  ) => {\n    e.stopPropagation()\n    action(rowData)\n  }\n\n  return (\n    <StyledCell\n      stickyCell={Boolean(rowActions) || Boolean(expandable)}\n      rowActionsBgColor={rowActions?.bgColor}\n    >\n      <Box flex alignItems=\"center\" justifyContent=\"flex-end\">\n        {rowActions &&\n          rowActions.actions?.map((action, actionIndex) => {\n            if (!action.showCondition || action.showCondition(rowData)) {\n              return (\n                <Wrapper flex key={actionIndex}>\n                  {isReactElement(action.element) &&\n                    React.cloneElement(action.element, {\n                      onClick: (e: MouseEvent) => {\n                        handleAction(e, action.onClick)\n                      },\n                      tabIndex: 0,\n                      className: 'reactElementRowAction',\n                    })}\n                  {action.genericButton && !isReactElement(action.element) && (\n                    <Button\n                      {...action.genericButton}\n                      handleClick={(e) => {\n                        handleAction(e, action.onClick)\n                      }}\n                    >\n                      {action.genericButton.children}\n                    </Button>\n                  )}\n                  {action.iconButton && (\n                    <IconStrict\n                      {...action.iconButton}\n                      handleClick={(e) => {\n                        handleAction(e, action.onClick)\n                      }}\n                    />\n                  )}\n                </Wrapper>\n              )\n            }\n            return null\n          })}\n        {expandable && expandable(rowData) && (\n          <CaretIcon\n            render=\"caret\"\n            handleClick={(e) => {\n              e.stopPropagation()\n              toggleExpansion()\n            }}\n            size={36}\n            isOpen={isExpanded}\n            backgroundColor=\"cream\"\n          />\n        )}\n      </Box>\n    </StyledCell>\n  )\n}\n\nconst Wrapper = styled(Box)`\n  white-space: nowrap;\n  margin-right: 8px;\n\n  &:last-child {\n    margin-right: 0px;\n  }\n\n  .reactElementRowAction {\n    cursor: pointer;\n    ${focusOutlineStyle}\n  }\n`\n\nconst CaretIcon = styled(IconStrict)<{ isOpen?: boolean }>(\n  ({ isOpen }) => `\n    transform: ${isOpen ? 'rotate(90deg)' : 'rotate(0deg)'};\n    transition: transform 0.3s ease;\n  `,\n)\n"],"names":["React"],"mappings":"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"}

package/dist/Table/components/TableHeader.js

@@ -39,3 +39,4 @@ const TableHeader = ({
 };
 
 export { TableHeader };
+//# sourceMappingURL=TableHeader.js.map

package/dist/Table/components/TableHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableHeader.js","sources":["../../../src/Table/components/TableHeader.tsx"],"sourcesContent":["import React from 'react'\nimport { TableHeaderProps } from '../types'\nimport { StyledHeaderCell, StyledRow } from './commonComponents'\n\nexport const TableHeader = <T extends object>({\n  columns,\n  fixedHeader,\n  headerColor,\n  rowActions,\n  headerHeight,\n  columnPadding,\n  expandable,\n}: TableHeaderProps<T>) => {\n  return (\n    <StyledRow>\n      {columns.map((column, columnIndex) => (\n        <StyledHeaderCell\n          key={columnIndex}\n          fixedHeader={fixedHeader}\n          headerHeight={headerHeight}\n          minWidth={column.minWidth}\n          maxWidth={column.maxWidth}\n          headerColor={headerColor}\n          columnPadding={columnPadding}\n        >\n          {column.name}\n        </StyledHeaderCell>\n      ))}\n      {(expandable || rowActions) && (\n        <StyledHeaderCell\n          fixedHeader={fixedHeader}\n          stickyCell={true}\n          minWidth={rowActions?.minWidth}\n          headerColor={headerColor}\n          columnPadding={columnPadding}\n        >\n          Actions\n        </StyledHeaderCell>\n      )}\n    </StyledRow>\n  )\n}\n"],"names":[],"mappings":";;;AAIO,MAAM,cAAc,CAAmB;AAAA,EAC5C,OAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,UAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,UAAA;AACF,CAA2B,KAAA;AACzB,EAAA,4BACG,SACE,EAAA,EAAA,QAAA,EAAA;AAAA,IAAQ,OAAA,CAAA,GAAA,CAAI,CAAC,MAAA,EAAQ,WACpB,qBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QAEC,WAAA;AAAA,QACA,YAAA;AAAA,QACA,UAAU,MAAO,CAAA,QAAA;AAAA,QACjB,UAAU,MAAO,CAAA,QAAA;AAAA,QACjB,WAAA;AAAA,QACA,aAAA;AAAA,QAEC,QAAO,EAAA,MAAA,CAAA,IAAA;AAAA,OAAA;AAAA,MARH,WAAA;AAAA,KAUR,CAAA;AAAA,IAAA,CACC,cAAc,UACd,qBAAA,GAAA;AAAA,MAAC,gBAAA;AAAA,MAAA;AAAA,QACC,WAAA;AAAA,QACA,UAAY,EAAA,IAAA;AAAA,QACZ,UAAU,UAAY,EAAA,QAAA;AAAA,QACtB,WAAA;AAAA,QACA,aAAA;AAAA,QACD,QAAA,EAAA,SAAA;AAAA,OAAA;AAAA,KAED;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/Table/components/TableRow.js

@@ -111,3 +111,4 @@ const TableRow = ({
 };
 
 export { TableRow };
+//# sourceMappingURL=TableRow.js.map

package/dist/Table/components/TableRow.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TableRow.js","sources":["../../../src/Table/components/TableRow.tsx"],"sourcesContent":["import React, { ReactElement, ReactNode, useState } from 'react'\nimport { isReactElement } from '../../utils/isReactElement'\nimport { isMappedReactElement } from '../helpers'\nimport { TableRowProps } from '../types'\nimport { RowActions } from './RowActions'\nimport { StyledCell, StyledRow } from './commonComponents'\n\nexport const TableRow = <T extends object>({\n  rowData,\n  rowIndex,\n  columns,\n  subRows,\n  subTable,\n  stripedColor,\n  rowActions,\n  rowColor,\n  rowBorderColor,\n  rowPadding,\n  columnPadding,\n  showActions,\n  expandable,\n  clickableRow,\n}: TableRowProps<T>) => {\n  const [expandedRows, setExpandedRows] = useState<number[]>([])\n\n  const toggleRowExpansion = (rowIndex: number) => {\n    setExpandedRows((prevState) =>\n      prevState.includes(rowIndex)\n        ? prevState.filter((index) => index !== rowIndex)\n        : [...prevState, rowIndex],\n    )\n  }\n\n  const subRowsData = subRows?.rows(rowData)\n  const subTableData = subTable?.table(rowData)\n  const showSubRowsOnExpand =\n    subRows?.showOnExpand && subRows?.showOnExpand(rowData)\n  const showSubTableOnExpand =\n    subTable?.showOnExpand && subTable?.showOnExpand(rowData)\n\n  const showActionsCell = expandable || rowActions\n  const expandSubProp = showActionsCell ? columns.length + 1 : columns.length\n\n  return (\n    <>\n      <StyledRow\n        stripedColor={stripedColor}\n        rowColor={rowColor}\n        rowBorderColor={rowBorderColor}\n        clickableRow={!!clickableRow}\n        onClick={() => clickableRow && clickableRow(rowData)}\n        tabIndex={clickableRow && 0}\n      >\n        {columns.map((column, columnIndex) => {\n          let cellContent: ReactNode\n          if (column.cell) {\n            cellContent = column.cell(rowData, rowIndex, column, rowIndex)\n          }\n\n          return (\n            <StyledCell\n              key={columnIndex}\n              rowPadding={rowPadding}\n              columnPadding={columnPadding}\n              minWidth={column.minWidth}\n              maxWidth={column.maxWidth}\n              noWrapContent={column.noWrapContent}\n              truncateContent={column.truncateContent}\n              hideOverflow={column.hideOverflow}\n            >\n              {cellContent}\n            </StyledCell>\n          )\n        })}\n\n        {(showActionsCell || showActions) && (\n          <RowActions\n            expandable={expandable}\n            rowActions={rowActions}\n            rowData={rowData}\n            isExpanded={expandedRows.includes(rowIndex)}\n            toggleExpansion={() => toggleRowExpansion(rowIndex)}\n          />\n        )}\n      </StyledRow>\n\n      {/**\n       * This could be extracted out and cleaned up\n       * this section is for expanded rows only\n       * Items rendered here wont show unless expanded\n       */}\n      {expandedRows.includes(rowIndex) && (\n        <>\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isReactElement(subRowsData) &&\n            React.cloneElement(subRowsData as ReactElement, {\n              rowPadding: rowPadding,\n              columnPadding: columnPadding,\n            })}\n\n          {subRows &&\n            subRowsData &&\n            showSubRowsOnExpand &&\n            isMappedReactElement(subRowsData) &&\n            (subRowsData as ReactElement[]).map((row) =>\n              React.cloneElement(row, {\n                rowPadding: rowPadding,\n                showActions: showActionsCell,\n              }),\n            )}\n\n          {subTable && showSubTableOnExpand && subTableData && (\n            <StyledCell colSpan={expandSubProp}>\n              {React.cloneElement(subTableData, {\n                rowPadding: rowPadding,\n                columnPadding: columnPadding,\n              })}\n            </StyledCell>\n          )}\n        </>\n      )}\n\n      {/**\n       * This could be extracted out and cleaned up\n       * this section is for rendering things under a row,\n       * without the need to expand.\n       * Items rendered here wont show when expanded\n       */}\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isReactElement(subRowsData) &&\n        React.cloneElement(subRowsData as ReactElement, {\n          rowPadding: rowPadding,\n          columnPadding: columnPadding,\n        })}\n\n      {subRows &&\n        subRowsData &&\n        !showSubRowsOnExpand &&\n        isMappedReactElement(subRowsData) &&\n        (subRowsData as ReactElement[]).map((row) =>\n          React.cloneElement(row, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          }),\n        )}\n\n      {subTable && subTableData && !showSubTableOnExpand && (\n        <StyledCell colSpan={expandSubProp}>\n          {React.cloneElement(subTableData, {\n            rowPadding: rowPadding,\n            columnPadding: columnPadding,\n          })}\n        </StyledCell>\n      )}\n    </>\n  )\n}\n"],"names":["rowIndex","React"],"mappings":"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"}

package/dist/Table/components/commonComponents.js

@@ -120,3 +120,4 @@ const StyledRow = styled.tr`
 `;
 
 export { StyledCell, StyledHeaderCell, StyledRow, StyledTable };
+//# sourceMappingURL=commonComponents.js.map

package/dist/Table/components/commonComponents.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"commonComponents.js","sources":["../../../src/Table/components/commonComponents.tsx"],"sourcesContent":["import { darken } from 'polished'\nimport styled, { css } from 'styled-components'\nimport { fontStyleMapping } from '../../Text/fontMapping'\nimport { theme } from '../../theme'\nimport { focusOutlineStyle } from '../../utils/focusOutline'\nimport { TableStylesProps } from '../types'\n\nexport const StyledTable = styled.table<TableStylesProps>`\n  width: 100%;\n  height: 100%;\n  border-collapse: collapse;\n  overflow: auto;\n  background: ${theme.colors.coconut};\n  border-spacing: 30px;\n`\n\nexport const StyledHeaderCell = styled.th<TableStylesProps>`\n  background: ${theme.colors.coconut};\n  position: ${({ fixedHeader }) => (fixedHeader ? 'sticky' : 'auto')};\n  top: 0;\n  z-index: 2;\n  text-align: left;\n  vertical-align: bottom;\n  ${fontStyleMapping['label']};\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ headerColor }) =>\n    headerColor &&\n    css`\n      background: ${theme.colors[headerColor]};\n    `}\n\n  ${({ headerHeight }) =>\n    headerHeight &&\n    css`\n      height: ${headerHeight};\n    `}\n\n  ${({ maxWidth }) =>\n    maxWidth &&\n    css`\n      max-width: ${maxWidth};\n    `}\n\n  ${({ minWidth }) =>\n    minWidth &&\n    css`\n      min-width: ${minWidth};\n    `}\n    \n  ${({ columnPadding }) =>\n    columnPadding &&\n    css`\n      padding-left: ${columnPadding};\n      padding-right: ${columnPadding};\n    `};\n`\n\nexport const StyledCell = styled.td<TableStylesProps>`\n  vertical-align: middle;\n  padding-left: 8px;\n  padding-right: 8px;\n  padding-top: 8px;\n  padding-bottom: 8px;\n\n  ${({ hideOverflow }) =>\n    hideOverflow &&\n    css`\n      overflow: hidden;\n    `};\n\n  ${({ noWrapContent }) =>\n    noWrapContent &&\n    css`\n      white-space: nowrap;\n    `};\n\n  ${({ truncateContent }) =>\n    truncateContent &&\n    css`\n      overflow: hidden;\n      white-space: nowrap;\n      text-overflow: ellipsis;\n    `};\n\n  ${({ stickyCell }) =>\n    stickyCell &&\n    css`\n      position: sticky;\n      right: 0;\n    `};\n\n  ${({ rowPadding }) =>\n    rowPadding &&\n    css`\n      padding-top: ${rowPadding};\n      padding-bottom: ${rowPadding};\n    `};\n\n  ${({ columnPadding }) =>\n    columnPadding &&\n    css`\n      padding-left: ${columnPadding};\n      padding-right: ${columnPadding};\n    `};\n\n  ${({ maxWidth }) =>\n    maxWidth &&\n    css`\n      max-width: ${maxWidth};\n    `}\n\n  ${({ rowActionsBgColor }) =>\n    rowActionsBgColor &&\n    css`\n      background: ${theme.colors[rowActionsBgColor]};\n    `}\n`\n\nexport const StyledRow = styled.tr<TableStylesProps>`\n  background: ${theme.colors.custard};\n\n  ${({ rowBorderColor }) =>\n    rowBorderColor &&\n    css`\n      border-bottom: 1px solid ${theme.colors[rowBorderColor]};\n    `}\n\n  ${({ rowColor }) =>\n    rowColor &&\n    css`\n      background: ${theme.colors[rowColor]};\n    `}\n\n  ${({ stripedColor }) =>\n    stripedColor &&\n    css`\n      &:nth-child(even) {\n        background: ${theme.colors[stripedColor]};\n      }\n    `}\n\n    ${({ clickableRow, rowColor }) =>\n    clickableRow &&\n    css`\n      cursor: pointer;\n      &:hover {\n        background: ${darken(0.1, theme.colors[rowColor ?? 'custard'])};\n      }\n      &:focus-visible {\n        ${focusOutlineStyle}\n        background: ${darken(0.1, theme.colors[rowColor ?? 'custard'])};\n      }\n    `}\n`\n"],"names":[],"mappings":";;;;;;AAOO,MAAM,cAAc,MAAO,CAAA,KAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,cAKlB,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA,EAAA;AAI7B,MAAM,mBAAmB,MAAO,CAAA,EAAA,CAAA;AAAA,cACvB,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA,YAAA,EACtB,CAAC,EAAE,WAAA,EAAmB,KAAA,WAAA,GAAc,WAAW,MAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAKhE,EAAA,gBAAA,CAAiB,OAAO,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAMzB,CAAC,EAAE,WAAY,EAAA,KACf,WACA,IAAA,GAAA,CAAA;AAAA,kBACgB,EAAA,KAAA,CAAM,MAAO,CAAA,WAAW,CAAC,CAAA;AAAA,IACxC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,YAAa,EAAA,KAChB,YACA,IAAA,GAAA,CAAA;AAAA,cAAA,EACY,YAAY,CAAA;AAAA,IACvB,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,QAAS,EAAA,KACZ,QACA,IAAA,GAAA,CAAA;AAAA,iBAAA,EACe,QAAQ,CAAA;AAAA,IACtB,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,QAAS,EAAA,KACZ,QACA,IAAA,GAAA,CAAA;AAAA,iBAAA,EACe,QAAQ,CAAA;AAAA,IACtB,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,aAAc,EAAA,KACjB,aACA,IAAA,GAAA,CAAA;AAAA,oBAAA,EACkB,aAAa,CAAA;AAAA,qBAAA,EACZ,aAAa,CAAA;AAAA,IAC/B,CAAA,CAAA;AAAA,EAAA;AAGE,MAAM,aAAa,MAAO,CAAA,EAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAO7B,CAAC,EAAE,YAAa,EAAA,KAChB,YACA,IAAA,GAAA,CAAA;AAAA;AAAA,IAEC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,aAAc,EAAA,KACjB,aACA,IAAA,GAAA,CAAA;AAAA;AAAA,IAEC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,eAAgB,EAAA,KACnB,eACA,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA;AAAA,IAIC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,UAAW,EAAA,KACd,UACA,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,IAGC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,UAAW,EAAA,KACd,UACA,IAAA,GAAA,CAAA;AAAA,mBAAA,EACiB,UAAU,CAAA;AAAA,sBAAA,EACP,UAAU,CAAA;AAAA,IAC7B,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,aAAc,EAAA,KACjB,aACA,IAAA,GAAA,CAAA;AAAA,oBAAA,EACkB,aAAa,CAAA;AAAA,qBAAA,EACZ,aAAa,CAAA;AAAA,IAC/B,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,QAAS,EAAA,KACZ,QACA,IAAA,GAAA,CAAA;AAAA,iBAAA,EACe,QAAQ,CAAA;AAAA,IACtB,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,iBAAkB,EAAA,KACrB,iBACA,IAAA,GAAA,CAAA;AAAA,kBACgB,EAAA,KAAA,CAAM,MAAO,CAAA,iBAAiB,CAAC,CAAA;AAAA,IAC9C,CAAA,CAAA;AAAA,EAAA;AAGE,MAAM,YAAY,MAAO,CAAA,EAAA,CAAA;AAAA,cAChB,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA,EAAA,EAEhC,CAAC,EAAE,cAAe,EAAA,KAClB,cACA,IAAA,GAAA,CAAA;AAAA,+BAC6B,EAAA,KAAA,CAAM,MAAO,CAAA,cAAc,CAAC,CAAA;AAAA,IACxD,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,QAAS,EAAA,KACZ,QACA,IAAA,GAAA,CAAA;AAAA,kBACgB,EAAA,KAAA,CAAM,MAAO,CAAA,QAAQ,CAAC,CAAA;AAAA,IACrC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,YAAa,EAAA,KAChB,YACA,IAAA,GAAA,CAAA;AAAA;AAAA,oBAEkB,EAAA,KAAA,CAAM,MAAO,CAAA,YAAY,CAAC,CAAA;AAAA;AAAA,IAE3C,CAAA,CAAA;AAAA;AAAA,IAAA,EAEC,CAAC,EAAE,YAAc,EAAA,QAAA,OACnB,YACA,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,oBAAA,EAGkB,OAAO,GAAK,EAAA,KAAA,CAAM,OAAO,QAAY,IAAA,SAAS,CAAC,CAAC,CAAA;AAAA;AAAA;AAAA,QAAA,EAG5D,iBAAiB,CAAA;AAAA,oBAAA,EACL,OAAO,GAAK,EAAA,KAAA,CAAM,OAAO,QAAY,IAAA,SAAS,CAAC,CAAC,CAAA;AAAA;AAAA,IAEjE,CAAA,CAAA;AAAA;;;;"}

package/dist/Table/helpers.js

@@ -14,3 +14,4 @@ const isMappedReactElement = (obj) => {
 };
 
 export { isMappedReactElement };
+//# sourceMappingURL=helpers.js.map

package/dist/Table/helpers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.js","sources":["../../src/Table/helpers.ts"],"sourcesContent":["import { ReactElement, isValidElement } from 'react'\n\nexport const isMappedReactElement = (obj: unknown): obj is ReactElement[] => {\n  if (!Array.isArray(obj)) return false\n  if (!obj[0]) return false\n  if (!isValidElement(obj[0])) return false\n  const allReactElements = obj.every(\n    (val, i, arr) => typeof val === typeof arr[0],\n  )\n  return allReactElements\n}\n"],"names":[],"mappings":";;AAEa,MAAA,oBAAA,GAAuB,CAAC,GAAwC,KAAA;AAC3E,EAAI,IAAA,CAAC,KAAM,CAAA,OAAA,CAAQ,GAAG,CAAA;AAAG,IAAO,OAAA,KAAA,CAAA;AAChC,EAAI,IAAA,CAAC,IAAI,CAAC,CAAA;AAAG,IAAO,OAAA,KAAA,CAAA;AACpB,EAAA,IAAI,CAAC,cAAA,CAAe,GAAI,CAAA,CAAC,CAAC,CAAA;AAAG,IAAO,OAAA,KAAA,CAAA;AACpC,EAAA,MAAM,mBAAmB,GAAI,CAAA,KAAA;AAAA,IAC3B,CAAC,KAAK,CAAG,EAAA,GAAA,KAAQ,OAAO,GAAQ,KAAA,OAAO,IAAI,CAAC,CAAA;AAAA,GAC9C,CAAA;AACA,EAAO,OAAA,gBAAA,CAAA;AACT;;;;"}

package/dist/Tag/Tag.js

@@ -45,3 +45,4 @@ const TagText = styled(Text)`
 `;
 
 export { Tag };
+//# sourceMappingURL=Tag.js.map

package/dist/Tag/Tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tag.js","sources":["../../src/Tag/Tag.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\nimport { MarginProps } from '../utils/space'\n\nimport { Text } from '../Text'\nimport { Color, theme } from '../theme'\nimport { Box } from '../Box'\n\nexport type TagProps = {\n  label: string\n  color: Color\n  bgColor: Color\n  borderColor?: Color\n  className?: string\n} & MarginProps\n\nexport const Tag: FC<TagProps> = ({\n  label,\n  color,\n  borderColor,\n  bgColor,\n  className,\n  ...marginProps\n}) => (\n  <Wrapper\n    bgColor={bgColor}\n    className={className}\n    borderColor={borderColor}\n    {...marginProps}\n    alignContent=\"center\"\n    justifyContent=\"center\"\n  >\n    <TagText tag=\"span\" typo=\"label\" color={color}>\n      {label}\n    </TagText>\n  </Wrapper>\n)\n\ntype WrapperProps = Pick<TagProps, 'bgColor' | 'borderColor'>\n\nconst Wrapper = styled(Box)<WrapperProps>`\n  background-color: ${({ bgColor }) => bgColor && theme.colors[bgColor]};\n  border: ${({ borderColor }) =>\n    borderColor && `1px solid ${theme.colors[borderColor]}`};\n\n  border-radius: 6px;\n  padding: 4px 8px;\n\n  height: 22px;\n\n  box-sizing: border-box;\n  display: inline-flex;\n`\n\nconst TagText = styled(Text)`\n  display: flex;\n  align-items: center;\n  font-size: 10px;\n  font-weight: 500;\n  line-height: 12px;\n  text-transform: uppercase;\n`\n"],"names":[],"mappings":";;;;;;AAgBO,MAAM,MAAoB,CAAC;AAAA,EAChC,KAAA;AAAA,EACA,KAAA;AAAA,EACA,WAAA;AAAA,EACA,OAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG,WAAA;AACL,CACE,qBAAA,GAAA;AAAA,EAAC,OAAA;AAAA,EAAA;AAAA,IACC,OAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACC,GAAG,WAAA;AAAA,IACJ,YAAa,EAAA,QAAA;AAAA,IACb,cAAe,EAAA,QAAA;AAAA,IAEf,8BAAC,OAAQ,EAAA,EAAA,GAAA,EAAI,QAAO,IAAK,EAAA,OAAA,EAAQ,OAC9B,QACH,EAAA,KAAA,EAAA,CAAA;AAAA,GAAA;AACF,EAAA;AAKF,MAAM,OAAA,GAAU,OAAO,GAAG,CAAA,CAAA;AAAA,oBACJ,EAAA,CAAC,EAAE,OAAQ,EAAA,KAAM,WAAW,KAAM,CAAA,MAAA,CAAO,OAAO,CAAC,CAAA;AAAA,UAC3D,EAAA,CAAC,EAAE,WAAA,EACX,KAAA,WAAA,IAAe,aAAa,KAAM,CAAA,MAAA,CAAO,WAAW,CAAC,CAAE,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAW3D,MAAM,OAAA,GAAU,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/Text/Text.js

@@ -170,3 +170,4 @@ const Container = styled(Box)(
 );
 
 export { Text };
+//# sourceMappingURL=Text.js.map

package/dist/Text/Text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Text.js","sources":["../../src/Text/Text.tsx"],"sourcesContent":["import React, { FC, forwardRef, LabelHTMLAttributes, ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Color, theme } from '../theme'\nimport { linkStyleOverride } from '../Link/Link'\nimport { Box } from '../Box'\nimport { MarginProps } from '../utils/space'\nimport { fontStyleMapping } from './fontMapping'\n\ninterface IText {\n  /** typography class name to apply predefined styles */\n  typo: string\n  /** HTML tag  */\n  as: any\n  /** text-align  */\n  align: string\n  /** color from the theme  */\n  color: Color\n  cursor: string\n}\n\n/**\n * @deprecated Use only new Typo\n */\n\nexport type DeprecatedTypo =\n  | 'header-large'\n  | 'header-medium'\n  | 'header-small'\n  | 'desc-heavy'\n  | 'desc-medium'\n  | 'desc-light'\n  | 'desc-small'\n  | 'base'\n  | 'base-small'\n  | 'base-xsmall'\n  | 'label-large'\n\nexport type Typo =\n  | 'hero-alternate'\n  | 'hero'\n  | 'heading-alternate'\n  | 'heading-large'\n  | 'heading-medium'\n  | 'heading-small'\n  | 'headline-regular'\n  | 'headline-small'\n  | 'body-standfirst'\n  | 'body-regular'\n  | 'body-small'\n  | 'caption'\n  | 'label'\n\ntype Props = {\n  children: ReactNode\n  tag?: any\n  className?: string\n  // Record<never, never> matches any non-null and non-undefined type so\n  // IntelliSense can suggest Typo to autocomplete\n  // eslint-disable-next-line @typescript-eslint/ban-types\n  typo?: Typo | (string & Record<never, never>)\n  align?: string\n  color?: Color\n  cursor?: string\n  title?: string\n} & MarginProps\n\nexport type TextProps = Props & Omit<LabelHTMLAttributes<HTMLElement>, 'color'>\n\nexport const Text: FC<TextProps> = forwardRef<HTMLElement, TextProps>(\n  (\n    {\n      children,\n      typo = 'body-regular',\n      className = '',\n      tag = 'p',\n      align = 'left',\n      color = 'liquorice',\n      cursor = 'inherit',\n      title = '',\n      ...props\n    },\n    ref,\n  ) => (\n    <Container\n      as={tag}\n      className={className}\n      typo={typo}\n      align={align}\n      color={color}\n      cursor={cursor}\n      title={title}\n      {...props}\n      ref={ref}\n    >\n      {children}\n    </Container>\n  ),\n)\n\nText.displayName = 'Text'\n\nconst isNewTypo = (value: string): value is Typo => {\n  return Object.keys(fontStyleMapping).includes(value)\n}\n\nconst Container = styled(Box)<IText>(\n  ({ align, color, cursor, typo }) => css`\n    /** TYPOGRAPHY STYLES */\n\n    ${isNewTypo(typo) && fontStyleMapping[typo]}\n\n    /** DEPRECATED TYPOGRAPHY STYLES */\n    ${typo === 'header-large' &&\n    css`\n      font-size: 24px;\n      line-height: 31px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 42px;\n        line-height: 54px;\n      }\n    `}\n\n  ${typo === 'header-medium' &&\n    css`\n      font-size: 21px;\n      line-height: 27px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 32px;\n        line-height: 41px;\n      }\n    `}\n\n  ${typo === 'header-small' &&\n    css`\n      font-size: 18px;\n      line-height: 23px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 21px;\n        line-height: 27px;\n      }\n    `}\n\n  ${typo === 'desc-heavy' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 700;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'desc-medium' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 500;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'desc-light' &&\n    css`\n      font-size: 14px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'desc-small' &&\n    css`\n      font-size: 12px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 18px;\n      }\n    `}\n\n  ${typo === 'base' &&\n    css`\n      font-size: 14px;\n      line-height: 23px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 16px;\n        line-height: 26px;\n      }\n    `}\n\n  ${typo === 'base-small' &&\n    css`\n      font-size: 12px;\n      line-height: 20px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 14px;\n        line-height: 23px;\n      }\n    `}\n\n  ${typo === 'base-xsmall' &&\n    css`\n      font-size: 10px;\n      line-height: 16px;\n      font-weight: 400;\n\n      @media (min-width: 768px) {\n        font-size: 12px;\n        line-height: 19px;\n      }\n    `}\n  \n  ${typo === 'label-large' &&\n    css`\n      font-size: 12px;\n      line-height: 100%;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 0.75px;\n    `}\n\n    text-align: ${align};\n    cursor: ${cursor};\n    color: ${theme.colors[color]};\n    ${linkStyleOverride({ color: theme.colors[color] })}\n  `,\n)\n"],"names":[],"mappings":"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"}

package/dist/Text/fontMapping.js

@@ -87,3 +87,4 @@ const fontStyleMapping = {
 };
 
 export { fontStyleMapping };
+//# sourceMappingURL=fontMapping.js.map

package/dist/Text/fontMapping.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontMapping.js","sources":["../../src/Text/fontMapping.ts"],"sourcesContent":["import { theme } from '../theme'\nimport { Typo } from './Text'\n\nexport const fontStyleMapping: Record<Typo, string> = {\n  'hero-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 56px;\n      line-height: 52px;\n    }\n  `,\n  hero: `\n    font-size: 32px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 40px;\n\n    @media (min-width: 768px) {\n      font-size: 40px;\n      line-height: 44px;\n    }\n  `,\n  'heading-alternate': `\n    font-size: 40px;\n    font-family: 'MarshmallowYouth';\n    font-weight: ${theme.font.weight.bold};\n    line-height: 40px;\n  `,\n  'heading-large': `\n    font-size: 28px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n\n    @media (min-width: 768px) {\n      font-size: 32px;\n      line-height: 40px;\n    }\n  `,\n  'heading-medium': `\n    font-size: 24px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 32px;\n  `,\n  'heading-small': `\n    font-size: 20px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 28px;\n  `,\n  'headline-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'headline-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.medium};\n    line-height: 20px;\n  `,\n  'body-standfirst': `\n    font-size: 18px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 24px;\n  `,\n  'body-regular': `\n    font-size: 16px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  'body-small': `\n    font-size: 14px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 20px;\n  `,\n  caption: `\n    font-size: 12px;\n    font-weight: ${theme.font.weight.normal};\n    line-height: 16px;\n  `,\n  label: `\n    font-size: 10px;\n    line-height: 12px;\n    font-weight: ${theme.font.weight.medium};\n    text-transform: uppercase;\n  `,\n}\n"],"names":[],"mappings":";;AAGO,MAAM,gBAAyC,GAAA;AAAA,EACpD,gBAAkB,EAAA,CAAA;AAAA;AAAA;AAAA,iBAGD,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAQvC,IAAM,EAAA,CAAA;AAAA;AAAA,iBAEW,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAQzC,mBAAqB,EAAA,CAAA;AAAA;AAAA;AAAA,iBAGJ,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,IAAI,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGvC,eAAiB,EAAA,CAAA;AAAA;AAAA,iBAEA,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAQzC,gBAAkB,EAAA,CAAA;AAAA;AAAA,iBAED,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,eAAiB,EAAA,CAAA;AAAA;AAAA,iBAEA,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,kBAAoB,EAAA,CAAA;AAAA;AAAA,iBAEH,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,gBAAkB,EAAA,CAAA;AAAA;AAAA,iBAED,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,iBAAmB,EAAA,CAAA;AAAA;AAAA,iBAEF,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,cAAgB,EAAA,CAAA;AAAA;AAAA,iBAEC,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,YAAc,EAAA,CAAA;AAAA;AAAA,iBAEG,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,OAAS,EAAA,CAAA;AAAA;AAAA,iBAEQ,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAAA,EAGzC,KAAO,EAAA,CAAA;AAAA;AAAA;AAAA,iBAGU,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA,EAAA,CAAA;AAG3C;;;;"}

package/dist/TextInput/TextInput.js

@@ -64,3 +64,4 @@ const TextInput = forwardRef(function TextInput2({
 });
 
 export { TextInput };
+//# sourceMappingURL=TextInput.js.map

package/dist/TextInput/TextInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextInput.js","sources":["../../src/TextInput/TextInput.tsx"],"sourcesContent":["import React, { FocusEvent, FormEvent, forwardRef, ForwardedRef } from 'react'\n\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { Box } from '../Box'\nimport { useUniqueId } from '../utils/id'\nimport {\n  Input,\n  StyledFrontIcon,\n  StyledTrailingIcon,\n} from '../fields/components/CommonInput'\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\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\nexport type TextInputProps = Props & InputProps\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    disabled = false,\n    frontIcon,\n    trailingIcon,\n    fallbackStyle,\n    ...fieldProps\n  }: TextInputProps,\n  ref: ForwardedRef<HTMLInputElement>,\n) {\n  const id = useUniqueId(idProp)\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          placeholder={placeholder}\n          value={value}\n          error={error}\n          frontIcon={frontIcon}\n          fallbackStyle={fallbackStyle}\n          autoComplete=\"off\"\n          onChange={(e: FormEvent<HTMLInputElement>) => {\n            onChange && onChange(e.currentTarget.value)\n            onInputChange && onInputChange(e)\n          }}\n          onBlur={onBlur}\n        />\n        {trailingIcon && (\n          <StyledTrailingIcon\n            disabled={disabled}\n            render={trailingIcon}\n            color=\"sesame\"\n          />\n        )}\n      </Box>\n    </Field>\n  )\n})\n"],"names":["TextInput"],"mappings":";;;;;;;AAmCa,MAAA,SAAA,GAAY,UAAW,CAAA,SAASA,UAC3C,CAAA;AAAA,EACE,EAAI,EAAA,MAAA;AAAA,EACJ,IAAO,GAAA,MAAA;AAAA,EACP,WAAA;AAAA,EACA,IAAA;AAAA,EACA,KAAA;AAAA,EACA,KAAQ,GAAA,KAAA;AAAA,EACR,MAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,SAAA;AAAA,EACA,YAAA;AAAA,EACA,aAAA;AAAA,EACA,GAAG,UAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,YAAY,MAAM,CAAA,CAAA;AAE7B,EAAA,uBACG,GAAA,CAAA,KAAA,EAAA,EAAO,GAAG,UAAA,EAAY,SAAS,EAAI,EAAA,KAAA,EAClC,QAAC,kBAAA,IAAA,CAAA,GAAA,EAAA,EAAI,IAAI,EAAA,IAAA,EAAC,UAAW,EAAA,QAAA,EAAS,gBAAe,YAC1C,EAAA,QAAA,EAAA;AAAA,IACC,SAAA,oBAAA,GAAA;AAAA,MAAC,eAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,MAAQ,EAAA,SAAA;AAAA,QACR,KAAM,EAAA,QAAA;AAAA,OAAA;AAAA,KACR;AAAA,oBAEF,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,IAAA;AAAA,QACA,EAAA;AAAA,QACA,IAAA;AAAA,QACA,GAAA;AAAA,QACA,WAAA;AAAA,QACA,KAAA;AAAA,QACA,KAAA;AAAA,QACA,SAAA;AAAA,QACA,aAAA;AAAA,QACA,YAAa,EAAA,KAAA;AAAA,QACb,QAAA,EAAU,CAAC,CAAmC,KAAA;AAC5C,UAAY,QAAA,IAAA,QAAA,CAAS,CAAE,CAAA,aAAA,CAAc,KAAK,CAAA,CAAA;AAC1C,UAAA,aAAA,IAAiB,cAAc,CAAC,CAAA,CAAA;AAAA,SAClC;AAAA,QACA,MAAA;AAAA,OAAA;AAAA,KACF;AAAA,IACC,YACC,oBAAA,GAAA;AAAA,MAAC,kBAAA;AAAA,MAAA;AAAA,QACC,QAAA;AAAA,QACA,MAAQ,EAAA,YAAA;AAAA,QACR,KAAM,EAAA,QAAA;AAAA,OAAA;AAAA,KACR;AAAA,GAAA,EAEJ,CACF,EAAA,CAAA,CAAA;AAEJ,CAAC;;;;"}

package/dist/Textarea/Textarea.js

@@ -69,3 +69,4 @@ const StyledTextArea = styled.textarea`
 `;
 
 export { Textarea };
+//# sourceMappingURL=Textarea.js.map

package/dist/Textarea/Textarea.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Textarea.js","sources":["../../src/Textarea/Textarea.tsx"],"sourcesContent":["import React, { FocusEvent, FormEvent, ForwardedRef, forwardRef } from 'react'\nimport styled from 'styled-components'\n\nimport { theme } from '../theme'\nimport { useUniqueId } from '../utils/id'\nimport { Field } from '../fields/Field'\nimport { CommonFieldProps } from '../fields/commonFieldTypes'\nimport { MarginProps } from '../utils/space'\n\ntype BaseProps = {\n  id?: string\n  placeholder?: string\n  name?: string\n  value: string\n  error?: boolean\n  errorMsg?: string\n  resize?: 'none' | 'both'\n  disabled?: boolean\n  maxLength?: number\n  onBlur?: (e: FocusEvent<HTMLTextAreaElement>) => void\n  rows?: number\n  fallbackStyle?: boolean\n} & CommonFieldProps &\n  MarginProps\n\ntype TruncateProps =\n  | {\n      onChange: (e: string) => void\n      onInputChange?: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n  | {\n      onChange?: (e: string) => void\n      onInputChange: (e: FormEvent<HTMLTextAreaElement>) => void\n    }\n\nexport type TextareaProps = BaseProps & TruncateProps\n\nexport const Textarea = forwardRef(function Textarea(\n  {\n    id: idProp,\n    name,\n    value,\n    onChange,\n    onInputChange,\n    resize = 'none',\n    error = false,\n    placeholder,\n    disabled = false,\n    maxLength,\n    onBlur,\n    rows = 4,\n    fallbackStyle,\n    ...fieldProps\n  }: TextareaProps,\n  ref: ForwardedRef<HTMLTextAreaElement>,\n) {\n  const id = useUniqueId(idProp)\n  return (\n    <Field {...fieldProps} htmlFor={id} error={error}>\n      <StyledTextArea\n        ref={ref}\n        error={error}\n        id={id}\n        name={name}\n        disabled={disabled}\n        resize={resize}\n        fallbackStyle={fallbackStyle}\n        placeholder={placeholder}\n        value={value}\n        onChange={(e: FormEvent<HTMLTextAreaElement>) => {\n          onChange?.(e.currentTarget.value)\n          onInputChange?.(e)\n        }}\n        maxLength={maxLength}\n        onBlur={onBlur}\n        rows={rows}\n      />\n    </Field>\n  )\n})\n\ninterface TextArea {\n  resize: 'none' | 'both'\n  disabled: boolean\n  error: boolean\n  value: string\n  fallbackStyle?: boolean\n}\n\nconst StyledTextArea = styled.textarea<TextArea>`\n  font-size: 16px;\n  font: inherit;\n  line-height: 20px;\n  background: ${({ fallbackStyle }) =>\n    fallbackStyle ? theme.colors.custard : theme.colors.cream};\n  border: 2px solid ${theme.colors.oatmeal};\n  box-sizing: border-box;\n  border-radius: 12px;\n  width: 100%;\n  padding: 18px 14px;\n  color: ${theme.colors.liquorice};\n  resize: ${({ resize }) => resize};\n  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'text')};\n  opacity: ${({ disabled }) => (disabled ? '0.5' : '1')};\n  border-color: ${({ error }) =>\n    theme.colors[`${error ? 'strawberry' : 'oatmeal'}`]};\n  outline: none;\n\n  &:hover,\n  &:focus,\n  &:focus-visible {\n    border-color: ${({ error }) =>\n      error ? theme.colors.strawberry : theme.colors.marzipan};\n  }\n`\n"],"names":["Textarea"],"mappings":";;;;;;;AAqCa,MAAA,QAAA,GAAW,UAAW,CAAA,SAASA,SAC1C,CAAA;AAAA,EACE,EAAI,EAAA,MAAA;AAAA,EACJ,IAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,aAAA;AAAA,EACA,MAAS,GAAA,MAAA;AAAA,EACT,KAAQ,GAAA,KAAA;AAAA,EACR,WAAA;AAAA,EACA,QAAW,GAAA,KAAA;AAAA,EACX,SAAA;AAAA,EACA,MAAA;AAAA,EACA,IAAO,GAAA,CAAA;AAAA,EACP,aAAA;AAAA,EACA,GAAG,UAAA;AACL,CAAA,EACA,GACA,EAAA;AACA,EAAM,MAAA,EAAA,GAAK,YAAY,MAAM,CAAA,CAAA;AAC7B,EAAA,2BACG,KAAO,EAAA,EAAA,GAAG,UAAY,EAAA,OAAA,EAAS,IAAI,KAClC,EAAA,QAAA,kBAAA,GAAA;AAAA,IAAC,cAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,KAAA;AAAA,MACA,EAAA;AAAA,MACA,IAAA;AAAA,MACA,QAAA;AAAA,MACA,MAAA;AAAA,MACA,aAAA;AAAA,MACA,WAAA;AAAA,MACA,KAAA;AAAA,MACA,QAAA,EAAU,CAAC,CAAsC,KAAA;AAC/C,QAAW,QAAA,GAAA,CAAA,CAAE,cAAc,KAAK,CAAA,CAAA;AAChC,QAAA,aAAA,GAAgB,CAAC,CAAA,CAAA;AAAA,OACnB;AAAA,MACA,SAAA;AAAA,MACA,MAAA;AAAA,MACA,IAAA;AAAA,KAAA;AAAA,GAEJ,EAAA,CAAA,CAAA;AAEJ,CAAC,EAAA;AAUD,MAAM,iBAAiB,MAAO,CAAA,QAAA,CAAA;AAAA;AAAA;AAAA;AAAA,cAId,EAAA,CAAC,EAAE,aAAA,EACf,KAAA,aAAA,GAAgB,MAAM,MAAO,CAAA,OAAA,GAAU,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA,oBACvC,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,SAK/B,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA,UAAA,EACrB,CAAC,EAAE,MAAO,EAAA,KAAM,MAAM,CAAA;AAAA,UAAA,EACtB,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,gBAAgB,MAAO,CAAA;AAAA,WAAA,EACpD,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,QAAQ,GAAI,CAAA;AAAA,gBACrC,EAAA,CAAC,EAAE,KAAA,EACjB,KAAA,KAAA,CAAM,MAAO,CAAA,CAAA,EAAG,KAAQ,GAAA,YAAA,GAAe,SAAS,CAAA,CAAE,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAMnC,EAAA,CAAC,EAAE,KAAA,EACjB,KAAA,KAAA,GAAQ,MAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,QAAQ,CAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/Toggle/Toggle.js

@@ -82,3 +82,4 @@ const Checkbox = styled.input`
 `;
 
 export { Toggle };
+//# sourceMappingURL=Toggle.js.map

package/dist/Toggle/Toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toggle.js","sources":["../../src/Toggle/Toggle.tsx"],"sourcesContent":["import React, { FC } from 'react'\nimport styled from 'styled-components'\n\nimport { Box } from '../Box'\nimport { theme } from '../theme'\nimport { focusOutline } from '../utils/focusOutline'\nimport { MarginProps } from '../utils/space'\n\ntype Props = {\n  /** unique ID */\n  id?: string\n  /** checked flag  */\n  checked: boolean\n  /** onToggle listener  */\n  onToggle: () => void\n} & MarginProps\n\nexport const Toggle: FC<Props> = ({\n  id,\n  checked,\n  onToggle,\n  ...marginProps\n}) => {\n  return (\n    <Switch as=\"label\" id={id} {...marginProps}>\n      <Checkbox\n        type=\"checkbox\"\n        checked={checked}\n        onChange={onToggle}\n        onKeyDown={(e) => {\n          if (e.key === 'Enter') {\n            onToggle()\n          }\n        }}\n      />\n      <Slider />\n    </Switch>\n  )\n}\n\nconst Switch = styled(Box)`\n  position: relative;\n  display: inline-block;\n  width: 56px;\n  height: 32px;\n\n  input {\n    opacity: 0;\n    width: 0;\n    height: 0;\n  }\n`\n\nconst Slider = styled.span`\n  position: absolute;\n  cursor: pointer;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background-color: ${theme.colors.oatmeal};\n  border: none;\n  border-radius: 28px;\n  transition: 0.2s background-color;\n  outline: none;\n\n  &:hover {\n    background-color: ${theme.colors.marzipan};\n  }\n\n  &:before {\n    position: absolute;\n    content: '';\n    height: 24px;\n    width: 24px;\n    left: 4px;\n    bottom: 4px;\n    background-color: ${theme.colors.mascarpone};\n    transition: 0.2s transform;\n    border-radius: 50%;\n  }\n`\n\nconst Checkbox = styled.input`\n  ${focusOutline({ selector: `&:focus-visible + ${Slider}` })}\n\n  &:checked + ${Slider} {\n    background-color: ${theme.colors.pistachio};\n    border: none;\n  }\n\n  &:checked + ${Slider}:before {\n    transform: translateX(24px);\n  }\n`\n"],"names":[],"mappings":";;;;;;AAiBO,MAAM,SAAoB,CAAC;AAAA,EAChC,EAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,GAAG,WAAA;AACL,CAAM,KAAA;AACJ,EAAA,4BACG,MAAO,EAAA,EAAA,EAAA,EAAG,OAAQ,EAAA,EAAA,EAAS,GAAG,WAC7B,EAAA,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAK,EAAA,UAAA;AAAA,QACL,OAAA;AAAA,QACA,QAAU,EAAA,QAAA;AAAA,QACV,SAAA,EAAW,CAAC,CAAM,KAAA;AAChB,UAAI,IAAA,CAAA,CAAE,QAAQ,OAAS,EAAA;AACrB,YAAS,QAAA,EAAA,CAAA;AAAA,WACX;AAAA,SACF;AAAA,OAAA;AAAA,KACF;AAAA,wBACC,MAAO,EAAA,EAAA,CAAA;AAAA,GACV,EAAA,CAAA,CAAA;AAEJ,EAAA;AAEA,MAAM,MAAA,GAAS,OAAO,GAAG,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAazB,MAAM,SAAS,MAAO,CAAA,IAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,oBAOA,EAAA,KAAA,CAAM,OAAO,OAAO,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAOlB,EAAA,KAAA,CAAM,OAAO,QAAQ,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,sBAUrB,EAAA,KAAA,CAAM,OAAO,UAAU,CAAA;AAAA;AAAA;AAAA;AAAA,CAAA,CAAA;AAM/C,MAAM,WAAW,MAAO,CAAA,KAAA,CAAA;AAAA,EAAA,EACpB,aAAa,EAAE,QAAA,EAAU,qBAAqB,MAAM,CAAA,CAAA,EAAI,CAAC,CAAA;AAAA;AAAA,cAAA,EAE7C,MAAM,CAAA;AAAA,sBACE,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;AAAA;AAAA;AAAA,cAAA,EAI9B,MAAM,CAAA;AAAA;AAAA;AAAA,CAAA;;;;"}

package/dist/Tooltip/Tooltip.js

@@ -283,3 +283,4 @@ const Tip = styled.div`
 `;
 
 export { Container, Tip, Tooltip };
+//# sourceMappingURL=Tooltip.js.map

package/dist/Tooltip/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../src/Tooltip/Tooltip.tsx"],"sourcesContent":["import React, {\n  FC,\n  ReactNode,\n  useCallback,\n  useEffect,\n  useRef,\n  useState,\n} from 'react'\nimport { createPortal } from 'react-dom'\nimport styled, { css } from 'styled-components'\nimport { v4 as uuidv4 } from 'uuid'\nimport { Box } from '../Box'\nimport { Text } from '../Text'\nimport { useEventListener } from '../hooks'\nimport { theme } from '../theme'\nimport { debounce } from '../utils/debounce'\n\ntype Position = 'top' | 'bottom' | 'left' | 'right'\ntype ArrowPosition = Position | 'center'\n\nexport interface TooltipProps {\n  children: ReactNode\n  content: string | ReactNode\n  position: Position\n  maxWidth?: number\n  title?: string\n  underline?: boolean\n  fallbackStyle?: boolean\n  zIndex?: number\n  portalContainer?: Element | DocumentFragment\n}\n\nexport const Tooltip: FC<TooltipProps> = ({\n  children,\n  title,\n  content,\n  position = 'top',\n  maxWidth = 500,\n  underline = false,\n  fallbackStyle = false,\n  zIndex = 10,\n  portalContainer = document.body,\n}) => {\n  const documentRef = useRef<Document>(document)\n  const tipContainer = useRef<HTMLDivElement>(null)\n  const [showTip, setShowTip] = useState<boolean>(false)\n  const [tooltipPosition, setTooltipPosition] = useState<Position>(position)\n  const [childEl, setChildEl] = useState<HTMLElement | null>(null)\n  const [tooltipCoords, setTooltipCoords] = useState({ top: 0, left: 0 })\n\n  const randomId = uuidv4()\n\n  const checkInbounds = (element: DOMRect): boolean =>\n    element.top >= 0 &&\n    element.left >= 0 &&\n    element.bottom <= window.innerHeight &&\n    element.right <= window.innerWidth\n\n  const handleTipViewport = useCallback(() => {\n    const dimensions = tipContainer.current?.getBoundingClientRect()\n\n    if (!dimensions) return\n    if (checkInbounds(dimensions)) return\n\n    // If in bounds but not defaulted to top; default\n    if (dimensions.top >= 0 && tooltipPosition !== 'top') {\n      setTooltipPosition('top')\n      return\n    }\n    // if top out of bounds\n    if (dimensions.top < 0) {\n      setTooltipPosition('bottom')\n      return\n    }\n    // if right out of bounds\n    if (dimensions.right > window.innerWidth) {\n      setTooltipPosition('left')\n      return\n    }\n    // if left out of bounds\n    if (dimensions.left < 0) {\n      setTooltipPosition('right')\n      return\n    }\n    // If bottom out of bounds\n    if (dimensions.bottom > window.innerHeight) {\n      setTooltipPosition('top')\n      return\n    }\n  }, [tipContainer, tooltipPosition])\n\n  useEffect(() => {\n    handleTipViewport()\n    setChildEl(document.getElementById(randomId))\n  }, [])\n\n  useEffect(() => {\n    setTooltipPosition(position)\n  }, [position])\n\n  const arrowSize = 18\n\n  const calculateTooltipPosition = (): { top: number; left: number } => {\n    if (!childEl) return { top: 0, left: 0 }\n    if (!tipContainer.current) return { top: 0, left: 0 }\n\n    const childPosition = childEl.getBoundingClientRect()\n    const tipDimensions = tipContainer.current.getBoundingClientRect()\n\n    let top = 0\n    let left = 0\n\n    switch (tooltipPosition) {\n      case 'top':\n        top =\n          childPosition.top + window.scrollY - tipDimensions.height - arrowSize\n        left =\n          childPosition.left +\n          window.scrollX +\n          childPosition.width / 2 -\n          tipDimensions.width / 2\n        break\n      case 'bottom':\n        top = childPosition.bottom + window.scrollY + arrowSize\n        left =\n          childPosition.left +\n          window.scrollX +\n          childPosition.width / 2 -\n          tipDimensions.width / 2\n        break\n      case 'left':\n        left =\n          childPosition.left + window.scrollX - tipDimensions.width - arrowSize\n        top =\n          childPosition.top +\n          window.scrollY +\n          childPosition.height / 2 -\n          tipDimensions.height / 2\n        break\n      case 'right':\n        left = childPosition.right + window.scrollX + arrowSize\n        top =\n          childPosition.top +\n          window.scrollY +\n          childPosition.height / 2 -\n          tipDimensions.height / 2\n        break\n      default:\n        break\n    }\n    return { top, left }\n  }\n\n  useEffect(() => {\n    if (childEl) {\n      setTooltipCoords(calculateTooltipPosition())\n    }\n  }, [\n    position,\n    window.scrollY,\n    tipContainer.current,\n    childEl,\n    childEl?.getBoundingClientRect().top,\n    childEl?.getBoundingClientRect().left,\n  ])\n\n  useEventListener({\n    eventName: 'resize',\n    callback: debounce(handleTipViewport, 100),\n    ref: documentRef,\n  })\n\n  useEventListener({\n    eventName: 'scroll',\n    callback: debounce(handleTipViewport, 100),\n    ref: documentRef,\n  })\n\n  return (\n    <Container>\n      <UnderlinedChild\n        id={randomId}\n        underline={underline}\n        onMouseEnter={() => setShowTip(true)}\n        onMouseLeave={() => setShowTip(false)}\n      >\n        {children}\n      </UnderlinedChild>\n      {childEl &&\n        createPortal(\n          <Tip\n            className=\"tooltip\"\n            showTip={showTip}\n            position={position}\n            arrowPosition={tooltipPosition}\n            ref={tipContainer}\n            maxWidth={maxWidth}\n            fallbackStyle={fallbackStyle}\n            zIndex={zIndex}\n            style={{\n              position: 'absolute',\n              top: `${tooltipCoords.top}px`,\n              left: `${tooltipCoords.left}px`,\n            }}\n          >\n            {title && (\n              <Text\n                tag=\"h5\"\n                typo=\"desc-medium\"\n                color={fallbackStyle ? 'cream' : 'liquorice'}\n              >\n                {title}\n              </Text>\n            )}\n            {(typeof content === 'string' && (\n              <Text\n                typo=\"desc-light\"\n                color={fallbackStyle ? 'cream' : 'liquorice'}\n              >\n                {content}\n              </Text>\n            )) ||\n              content}\n          </Tip>,\n          portalContainer,\n        )}\n    </Container>\n  )\n}\n\nexport const Container = styled.div`\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  > span:hover + .tooltip {\n    opacity: 1;\n  }\n`\n\nconst UnderlinedChild = styled(Box)<{ underline: boolean }>`\n  cursor: pointer;\n  ${({ underline }) =>\n    underline &&\n    css`\n      border-bottom: 1px dashed ${theme.colors.marshmallowPink};\n    `}\n`\n\nconst arrowInset = 26\nconst arrowCenterPosition = 'calc(50% - 6px)'\nconst arrowVerticalCenter = 'calc(50% - 12px)'\n\nconst handleHorizontalArrowPosition = (arrowPosition: ArrowPosition) => {\n  switch (arrowPosition) {\n    case 'left':\n      return css`\n        left: ${arrowInset}px;\n      `\n    case 'right':\n      return css`\n        right: ${arrowInset}px;\n      `\n    default:\n      return css`\n        left: ${arrowCenterPosition};\n      `\n  }\n}\n\nconst handleVerticalArrowPosition = (arrowPosition: ArrowPosition) => {\n  switch (arrowPosition) {\n    case 'top':\n      return css`\n        top: ${arrowInset}px;\n      `\n    case 'bottom':\n      return css`\n        bottom: ${arrowInset}px;\n      `\n    default:\n      return css`\n        top: ${arrowVerticalCenter};\n      `\n  }\n}\n\nconst top = css<{ arrowPosition: ArrowPosition }>`\n  &:before {\n    bottom: -15px;\n    transform: rotate(-90deg);\n    ${({ arrowPosition }) => handleHorizontalArrowPosition(arrowPosition)}\n  }\n`\n\nconst bottom = css<{ arrowPosition: ArrowPosition }>`\n  &:before {\n    top: -15px;\n    transform: rotate(90deg);\n    ${({ arrowPosition }) => handleHorizontalArrowPosition(arrowPosition)}\n  }\n`\n\nconst left = css<{ arrowPosition: ArrowPosition }>`\n  &:before {\n    right: -11px;\n    transform: rotate(180deg);\n    ${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}\n  }\n`\n\nconst right = css<{ arrowPosition: ArrowPosition }>`\n  &:before {\n    left: -11px;\n    ${({ arrowPosition }) => handleVerticalArrowPosition(arrowPosition)}\n  }\n`\n\nexport const Tip = styled.div<{\n  showTip: boolean\n  position: Position\n  arrowPosition: ArrowPosition\n  maxWidth?: number\n  fallbackStyle?: boolean\n  zIndex: number\n}>`\n  position: absolute;\n  margin: auto;\n  background: ${theme.colors.custard};\n  padding: 16px 12px 20px;\n  border-radius: 16px;\n  max-width: 450px;\n  opacity: ${({ showTip }) => (showTip ? '1' : '0')};\n  transition: opacity 0.2s ease-in-out;\n  pointer-events: none;\n  cursor: default;\n  z-index: ${({ zIndex }) => (zIndex ? zIndex : '10')};\n\n  // this is the trick that will make sure the content can go up to maxWidth\n  margin-right: ${({ maxWidth }) => maxWidth && -maxWidth / 2 + 'px'};\n  max-width: ${({ maxWidth }) => maxWidth && maxWidth + 'px'};\n\n  ${({ arrowPosition }) => arrowPosition === 'top' && top}\n  ${({ arrowPosition }) => arrowPosition === 'bottom' && bottom}\n\t${({ arrowPosition }) => arrowPosition === 'left' && left}\n\t${({ arrowPosition }) => arrowPosition === 'right' && right}\n\n  &:before {\n    content: '';\n    border-style: solid;\n    border-width: 12px 12px 12px 0;\n    border-color: transparent ${theme.colors.custard} transparent transparent;\n    position: absolute;\n  }\n\n  ${({ fallbackStyle }) =>\n    fallbackStyle &&\n    css`\n      background: ${theme.colors.feijoa};\n      &:before {\n        border-color: transparent ${theme.colors.feijoa} transparent transparent;\n      }\n    `};\n`\n"],"names":["uuidv4","top","left"],"mappings":"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"}

package/dist/fields/Field/Field.js

@@ -6,3 +6,4 @@ const Field = ({ children, ...fieldProps }) => {
 };
 
 export { Field };
+//# sourceMappingURL=Field.js.map

package/dist/fields/Field/Field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../src/fields/Field/Field.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\n\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { InternalField } from '../components/InternalField'\n\nexport interface FieldProps extends CommonFieldProps {\n  htmlFor?: string\n  children: ReactNode\n}\n\nexport const Field = ({ children, ...fieldProps }: FieldProps) => {\n  return (\n    <InternalField fieldType=\"field\" {...fieldProps}>\n      {children}\n    </InternalField>\n  )\n}\n"],"names":[],"mappings":";;;AAUO,MAAM,QAAQ,CAAC,EAAE,QAAU,EAAA,GAAG,YAA6B,KAAA;AAChE,EAAA,2BACG,aAAc,EAAA,EAAA,SAAA,EAAU,OAAS,EAAA,GAAG,YAClC,QACH,EAAA,CAAA,CAAA;AAEJ;;;;"}

package/dist/fields/Fieldset/Fieldset.js

@@ -20,3 +20,4 @@ const Fieldset = ({
 };
 
 export { Fieldset };
+//# sourceMappingURL=Fieldset.js.map

package/dist/fields/Fieldset/Fieldset.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Fieldset.js","sources":["../../../src/fields/Fieldset/Fieldset.tsx"],"sourcesContent":["import React from 'react'\n\nimport { MarginProps } from '../../utils/space'\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { InternalField } from '../components/InternalField'\n\nexport type FieldsetProps = CommonFieldProps & MarginProps\n\nexport const Fieldset = ({\n  children,\n  renderAsTitle = true,\n  id,\n  ...fieldProps\n}: FieldsetProps) => {\n  return (\n    <InternalField\n      htmlFor={id}\n      fieldType=\"fieldset\"\n      renderAsTitle={renderAsTitle}\n      {...fieldProps}\n    >\n      {children}\n    </InternalField>\n  )\n}\n"],"names":[],"mappings":";;;AAQO,MAAM,WAAW,CAAC;AAAA,EACvB,QAAA;AAAA,EACA,aAAgB,GAAA,IAAA;AAAA,EAChB,EAAA;AAAA,EACA,GAAG,UAAA;AACL,CAAqB,KAAA;AACnB,EACE,uBAAA,GAAA;AAAA,IAAC,aAAA;AAAA,IAAA;AAAA,MACC,OAAS,EAAA,EAAA;AAAA,MACT,SAAU,EAAA,UAAA;AAAA,MACV,aAAA;AAAA,MACC,GAAG,UAAA;AAAA,MAEH,QAAA;AAAA,KAAA;AAAA,GACH,CAAA;AAEJ;;;;"}

package/dist/fields/components/CommonInput.js

@@ -63,3 +63,4 @@ const StyledTrailingIcon = styled(Icon)`
 `;
 
 export { Input, StyledFrontIcon, StyledTrailingIcon };
+//# sourceMappingURL=CommonInput.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"CommonInput.js","sources":["../../../src/fields/components/CommonInput.tsx"],"sourcesContent":["import styled, { css } from 'styled-components'\nimport { Icon } from '../../Icon'\nimport { Icons } from '../../Icon/iconsList'\nimport { theme } from '../../theme'\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 }) =>\n    theme.colors[`${error ? 'strawberry' : 'liquorice'}`]};\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 }) =>\n    fallbackStyle ? theme.colors.custard : theme.colors.cream};\n  border: 2px solid\n    ${({ error }) => (error ? theme.colors.strawberry : theme.colors.oatmeal)};\n\n  ${({ disabled, error }) =>\n    !disabled &&\n    !error &&\n    css`\n      &:hover,\n      &:focus-within {\n        border-color: ${theme.colors.marzipan};\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.colors.sesame};\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.colors.liquorice};\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.colors.liquorice};\n`\n"],"names":[],"mappings":";;;;AAoBO,MAAM,QAAQ,MAAO,CAAA,KAAA,CAAA;AAAA;AAAA,SAEjB,EAAA,CAAC,EAAE,KAAA,EACV,KAAA,KAAA,CAAM,MAAO,CAAA,CAAA,EAAG,KAAQ,GAAA,YAAA,GAAe,WAAW,CAAA,CAAE,CAAC,CAAA;AAAA;AAAA;AAAA;AAAA,UAAA,EAI7C,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,gBAAgB,SAAU,CAAA;AAAA,WAAA,EACvD,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,QAAQ,GAAI,CAAA;AAAA;AAAA,oBAEjC,EAAA,CAAC,EAAE,aAAA,EACrB,KAAA,aAAA,GAAgB,MAAM,MAAO,CAAA,OAAA,GAAU,KAAM,CAAA,MAAA,CAAO,KAAK,CAAA;AAAA;AAAA,IAEvD,EAAA,CAAC,EAAE,KAAA,EAAa,KAAA,KAAA,GAAQ,MAAM,MAAO,CAAA,UAAA,GAAa,KAAM,CAAA,MAAA,CAAO,OAAQ,CAAA;AAAA;AAAA,EAEzE,EAAA,CAAC,EAAE,QAAU,EAAA,KAAA,OACb,CAAC,QAAA,IACD,CAAC,KACD,IAAA,GAAA,CAAA;AAAA;AAAA;AAAA,sBAGoB,EAAA,KAAA,CAAM,OAAO,QAAQ,CAAA;AAAA;AAAA,IAExC,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAAA,EAKD,CAAC,EAAE,SAAU,EAAA,KACb,SACA,IAAA,CAAA;AAAA;AAAA,IAEC,CAAA,CAAA;AAAA;AAAA,EAAA,EAED,CAAC,EAAE,YAAa,EAAA,KAChB,YACA,IAAA,CAAA;AAAA;AAAA,IAEC,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAYQ,EAAA,KAAA,CAAM,OAAO,MAAM,CAAA;AAAA;AAAA,EAAA;AAInB,MAAA,eAAA,GAAkB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAK7B,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,QAAQ,GAAI,CAAA;AAAA,SAC5C,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA,EAAA;AAGpB,MAAA,kBAAA,GAAqB,OAAO,IAAI,CAAA,CAAA;AAAA;AAAA;AAAA;AAAA,WAAA,EAIhC,CAAC,EAAE,QAAA,EAAgB,KAAA,QAAA,GAAW,QAAQ,GAAI,CAAA;AAAA,SAC5C,EAAA,KAAA,CAAM,OAAO,SAAS,CAAA;AAAA;;;;"}

package/dist/fields/components/InternalField.js

@@ -100,3 +100,4 @@ const Container = styled(Box)`
 `;
 
 export { InternalField };
+//# sourceMappingURL=InternalField.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InternalField.js","sources":["../../../src/fields/components/InternalField.tsx"],"sourcesContent":["import React, { ReactNode } from 'react'\nimport styled, { css } from 'styled-components'\n\nimport { Text } from '../../Text'\nimport { Box } from '../../Box'\nimport { CommonFieldProps } from '../commonFieldTypes'\nimport { Icon } from '../../Icon'\n\ninterface InternalFieldProps extends CommonFieldProps {\n  children: ReactNode\n  className?: string\n  htmlFor?: string\n  fieldType: 'field' | 'fieldset'\n}\n\nexport const InternalField = ({\n  children,\n  fieldType,\n  renderAsTitle,\n  htmlFor,\n  className,\n  label,\n  assistiveText,\n  error,\n  errorMsg,\n  required,\n  completed,\n  ...marginProps\n}: InternalFieldProps) => {\n  const labelTag = fieldType === 'field' ? 'label' : 'legend'\n\n  return (\n    <Container\n      as={fieldType === 'field' ? 'div' : 'fieldset'}\n      className={className}\n      {...marginProps}\n    >\n      {label && (\n        <>\n          {renderAsTitle ? (\n            <Box mb=\"16px\">\n              <Text tag={labelTag} typo=\"heading-small\" htmlFor={htmlFor}>\n                {label}\n              </Text>\n\n              {assistiveText && (\n                <Text tag=\"p\" color=\"sesame\" mt={{ custom: 4 }}>\n                  {assistiveText}\n                </Text>\n              )}\n            </Box>\n          ) : (\n            <Text\n              tag={labelTag}\n              typo=\"label\"\n              color={error ? 'strawberry' : 'sesame'}\n              htmlFor={htmlFor}\n              mb={{ custom: 4 }}\n            >\n              {label}\n              {required && (\n                <Text tag=\"span\" typo=\"body-small\" color=\"strawberry\">\n                  *\n                </Text>\n              )}\n            </Text>\n          )}\n        </>\n      )}\n\n      <Box>{children}</Box>\n      {fieldType === 'field' && assistiveText && !renderAsTitle && (\n        <Text\n          tag={labelTag}\n          typo=\"caption\"\n          color={error ? 'strawberry' : 'sesame'}\n          mt={{ custom: 4 }}\n        >\n          {assistiveText}\n        </Text>\n      )}\n\n      {error &&\n        errorMsg &&\n        (typeof errorMsg === 'string' ? (\n          <Text tag=\"span\" typo=\"caption\" color=\"strawberry\" mt=\"8px\">\n            {errorMsg}\n          </Text>\n        ) : (\n          <Box mt=\"8px\">{errorMsg}</Box>\n        ))}\n\n      {/* When completed is false, whitespace is rendered */}\n      {completed !== undefined && (\n        <AnimationWrapper\n          displayStatus={completed}\n          isError={!!(error && errorMsg)}\n        >\n          <StatusWrapper mt={'8px'}>\n            <Icon render=\"included\" size={16} color=\"apple\" />\n            <Text typo=\"caption\" color=\"apple\">\n              Complete\n            </Text>\n          </StatusWrapper>\n        </AnimationWrapper>\n      )}\n    </Container>\n  )\n}\n\nconst AnimationWrapper = styled(Box)<{\n  displayStatus: boolean\n  isError: boolean\n}>`\n  width: 0;\n  overflow: hidden;\n\n  ${({ displayStatus }) =>\n    displayStatus &&\n    css`\n      transition: width 0.6s ease-in;\n      width: 100%;\n    `}\n\n  /* This enables animation to appear when previous state is error */\n  ${({ isError }) =>\n    isError &&\n    css`\n      height: 0;\n    `}\n`\n\nconst StatusWrapper = styled(Box)`\n  display: flex;\n  align-items: center;\n  gap: 4px;\n`\n\nconst Container = styled(Box)`\n  display: flex;\n  flex-direction: column;\n  position: relative;\n  width: 100%;\n\n  // In case, the element is a 'fieldset', we remove the border\n  border: 0;\n`\n"],"names":[],"mappings":"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"}

package/dist/fontStyle.js

@@ -35,3 +35,4 @@ const FontStyle = createGlobalStyle`
 `;
 
 export { FontStyle };
+//# sourceMappingURL=fontStyle.js.map

package/dist/fontStyle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fontStyle.js","sources":["../src/fontStyle.ts"],"sourcesContent":["import { createGlobalStyle } from 'styled-components'\nimport { theme } from './theme'\n\nexport const FontStyle = createGlobalStyle`\n  @font-face {\n    font-family: 'Circular';\n    src: url('https://uploads-ssl.webflow.com/5baa461315ee32413d16236d/5f7f0665430aaedf8cb0bbf3_CircularXXSub-RegularSubset.woff2') format('woff2');\n    font-weight: ${theme.font.weight.normal};\n    font-style: normal;\n    font-display: swap;\n  }\n\n  @font-face {\n    font-family: 'Circular';\n    src: url('https://uploads-ssl.webflow.com/5baa461315ee32413d16236d/5f7f066540b11e802f892996_CircularXXWeb-Medium.woff2') format('woff2');\n    font-weight: ${theme.font.weight.medium};\n    font-style: normal;\n    font-display: swap;\n  }\n\n  @font-face {\n    font-family: 'Circular';\n    src: url('https://uploads-ssl.webflow.com/5baa461315ee32413d16236d/5f7f0665ddfa22dd5375ca6e_CircularXXWeb-Bold.woff2') format('woff2');\n    font-weight: ${theme.font.weight.bold};\n    font-style: normal;\n    font-display: swap;\n  }\n\n  @font-face {\n    font-family: 'MarshmallowYouth';\n    src: url('https://assets.marshmallow.com/fonts/MarshmallowYouth-Bold.woff2') format('woff2');\n    font-weight: ${theme.font.weight.bold};\n    font-style: normal;\n  }\n`\n"],"names":[],"mappings":";;;AAGO,MAAM,SAAY,GAAA,iBAAA,CAAA;AAAA;AAAA;AAAA;AAAA,iBAIN,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQxB,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,MAAM,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQxB,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,IAAI,CAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAQtB,EAAA,KAAA,CAAM,IAAK,CAAA,MAAA,CAAO,IAAI,CAAA;AAAA;AAAA;AAAA;;;;"}