@redsift/design-system 11.6.0-muiv5-alpha.10 → 11.6.0-muiv5-alpha.11

package/packages/design-system/src/components/radio/_internal/styles.js

@@ -0,0 +1,113 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledRadio = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: center;
+  background: none;
+  border: none;
+  display: inline-flex;
+
+  input {
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    overflow: visible;
+    padding: 0;
+    position: absolute;
+    width: 100%;
+  }
+
+  span.label {
+    ${_ref => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
+}}
+
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+    padding-left: 4px;
+    padding-right: 16px;
+
+    [dir='rtl'] & {
+      padding-left: 16px;
+      padding-right: 4px;
+    }
+  }
+
+  .redsift-icon {
+    box-sizing: content-box;
+    padding: 2px;
+    width: 24px;
+
+    ${_ref2 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $isFocusVisible,
+    $theme
+  } = _ref2;
+  return css`
+      ${$isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-fill-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-fill-invalid);
+          ` : css`
+            color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};
+          `}
+
+      ${$isFocusVisible && !$isDisabled ? css`
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
+            border-radius: 16px;
+          ` : ''}
+    `;
+}}
+  }
+
+  &:hover,
+  &:focus-visible {
+    outline: none;
+
+    ${_ref3 => {
+  let {
+    $isColored,
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return !$isDisabled ? css`
+            .redsift-icon {
+              ${$isInvalid ? css`
+                    background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);
+                  ` : css`
+                    background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)` : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};
+                  `}
+              border-radius: 16px;
+            }
+          ` : '';
+}}
+  }
+`;
+
+export { StyledRadio };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/radio/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/radio/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledRadioProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadio = styled.label<StyledRadioProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  ${baseStyling}\n\n  align-items: center;\n  background: none;\n  border: none;\n  display: inline-flex;\n\n  input {\n    height: 100%;\n    margin: 0;\n    opacity: 0;\n    overflow: visible;\n    padding: 0;\n    position: absolute;\n    width: 100%;\n  }\n\n  span.label {\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n\n    font-family: var(--redsift-typography-body-font-family);\n    font-size: var(--redsift-typography-body-font-size);\n    font-weight: var(--redsift-typography-body-font-weight);\n    line-height: var(--redsift-typography-body-line-height);\n    padding-left: 4px;\n    padding-right: 16px;\n\n    [dir='rtl'] & {\n      padding-left: 16px;\n      padding-right: 4px;\n    }\n  }\n\n  .redsift-icon {\n    box-sizing: content-box;\n    padding: 2px;\n    width: 24px;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $isFocusVisible, $theme }) => css`\n      ${$isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-fill-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-fill-invalid);\n          `\n        : css`\n            color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-radio-fill-default)`\n              : `var(--redsift-color-${$theme}-components-radio-fill-uncolored)`};\n          `}\n\n      ${$isFocusVisible && !$isDisabled\n        ? css`\n            background-color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n              : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n            border-radius: 16px;\n          `\n        : ''}\n    `}\n  }\n\n  &:hover,\n  &:focus-visible {\n    outline: none;\n\n    ${({ $isColored, $isDisabled, $isInvalid, $theme }) =>\n      !$isDisabled\n        ? css`\n            .redsift-icon {\n              ${$isInvalid\n                ? css`\n                    background-color: var(--redsift-color-${$theme}-components-radio-fill-invalid-hover);\n                  `\n                : css`\n                    background-color: ${$isColored\n                      ? `var(--redsift-color-${$theme}-components-radio-fill-default-hover)`\n                      : `var(--redsift-color-${$theme}-components-radio-fill-uncolored-hover)`};\n                  `}\n              border-radius: 16px;\n            }\n          `\n        : ''}\n  }\n`;\n"],"names":["StyledRadio","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isFocusVisible","_ref3"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,WAAW,GAAGC,MAAM,CAACC,KAAwB,CAAA;AAC1D;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,IAAA,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAH,IAAA,CAAA;EAAA,OACpCC,WAAW,GACPG,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,GACDD,UAAU,GACVE,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAA,CAAW,GACDC,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAME,KAAA,IAAA;EAAA,IAAC;IAAEC,UAAU;IAAEL,WAAW;IAAEC,UAAU;IAAEK,eAAe;AAAEJ,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;AAAA,EAAA,OAAKD,GAAI,CAAA;AAChF,MAAQH,EAAAA,WAAW,GACTG,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,GACDD,UAAU,GACVE,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAA,CAAW,GACDC,GAAI,CAAA;AACd,mBAAqBE,EAAAA,UAAU,GACd,CAAsBH,oBAAAA,EAAAA,MAAO,iCAAgC,GAC7D,CAAA,oBAAA,EAAsBA,MAAO,CAAmC,iCAAA,CAAA,CAAA;AACjF,UAAY,CAAA,CAAA;AACZ;AACA,MAAA,EAAQI,eAAe,IAAI,CAACN,WAAW,GAC7BG,GAAI,CAAA;AACd,8BAAgCE,EAAAA,UAAU,GACzB,CAAsBH,oBAAAA,EAAAA,MAAO,uCAAsC,GACnE,CAAA,oBAAA,EAAsBA,MAAO,CAAyC,uCAAA,CAAA,CAAA;AACvF;AACA,UAAA,CAAW,GACD,EAAG,CAAA;AACb,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMK,KAAA,IAAA;EAAA,IAAC;IAAEF,UAAU;IAAEL,WAAW;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAK,KAAA,CAAA;EAAA,OAChD,CAACP,WAAW,GACRG,GAAI,CAAA;AACd;AACA,cAAgBF,EAAAA,UAAU,GACRE,GAAI,CAAA;AACtB,0DAAA,EAA4DD,MAAO,CAAA;AACnE,kBAAA,CAAmB,GACDC,GAAI,CAAA;AACtB,sCAAwCE,EAAAA,UAAU,GACzB,CAAsBH,oBAAAA,EAAAA,MAAO,uCAAsC,GACnE,CAAA,oBAAA,EAAsBA,MAAO,CAAyC,uCAAA,CAAA,CAAA;AAC/F,kBAAoB,CAAA,CAAA;AACpB;AACA;AACA,UAAA,CAAW,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACb;AACA;;;;"}

package/packages/design-system/src/components/radio-group/_internal/RadioGroup.js

@@ -0,0 +1,89 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useState, useEffect } from 'react';
+import classNames from 'classnames';
+import { RadioGroupOrientation } from './types.js';
+import { RadioGroupContext } from './context.js';
+import { StyledRadioGroup } from './styles.js';
+import { ColorPalette } from '../../../types/_internal/colors.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { ThemeProvider } from '../../theme/_internal/context.js';
+
+const _excluded = ["children", "className", "color", "defaultValue", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
+const COMPONENT_NAME = 'RadioGroup';
+const CLASSNAME = 'redsift-radio-group';
+
+/**
+ * The RadioGroup component.
+ * Can be used as controlled or uncontrolled.
+ */
+const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color = ColorPalette.primary,
+      defaultValue,
+      description,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      onChange,
+      orientation = RadioGroupOrientation.vertical,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [selectedValue, setValue] = useState(value || defaultValue || '');
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+  const state = {
+    value: selectedValue,
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    setValue(value) {
+      if (isReadOnly || isDisabled) {
+        return;
+      }
+      const previousValue = selectedValue;
+      setValue(value);
+      if (value !== previousValue && onChange) {
+        onChange(value);
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledRadioGroup, _extends({
+    color: color
+  }, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isInvalid: isInvalid || isRequired && selectedValue.length === 0,
+    $isReadOnly: isReadOnly,
+    $orientation: orientation,
+    $theme: theme,
+    "aria-disabled": isDisabled,
+    className: classNames(RadioGroup.className, className),
+    ref: ref,
+    role: "radiogroup"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: `${RadioGroup.className}-label`
+  }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
+    className: `${RadioGroup.className}-boxes`
+  }, /*#__PURE__*/React__default.createElement(RadioGroupContext.Provider, {
+    value: state
+  }, children)), /*#__PURE__*/React__default.createElement("span", {
+    className: `${RadioGroup.className}-description`
+  }, description)));
+});
+RadioGroup.className = CLASSNAME;
+RadioGroup.displayName = COMPONENT_NAME;
+
+export { RadioGroup };
+//# sourceMappingURL=RadioGroup.js.map

package/packages/design-system/src/components/radio-group/_internal/RadioGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"RadioGroup.js","sources":["../../../../../../../src/components/radio-group/RadioGroup.tsx"],"sourcesContent":["import React, { forwardRef, RefObject, useEffect, useState } from 'react';\nimport classNames from 'classnames';\nimport { Comp, ColorPalette } from '../../types';\nimport { RadioGroupOrientation, RadioGroupProps } from './types';\nimport { RadioGroupContext } from './context';\nimport { StyledRadioGroup } from './styles';\nimport { ThemeProvider, useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'RadioGroup';\nconst CLASSNAME = 'redsift-radio-group';\n\n/**\n * The RadioGroup component.\n * Can be used as controlled or uncontrolled.\n */\nexport const RadioGroup: Comp<RadioGroupProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    children,\n    className,\n    color = ColorPalette.primary,\n    defaultValue,\n    description,\n    isDisabled,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    label,\n    onChange,\n    orientation = RadioGroupOrientation.vertical,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const [selectedValue, setValue] = useState<string>(value || defaultValue || '');\n  useEffect(() => {\n    if (value) {\n      state.setValue(value);\n    }\n  }, [value]);\n\n  const state = {\n    value: selectedValue,\n    isDisabled: isDisabled || false,\n    isReadOnly: isReadOnly || false,\n    setValue(value: string) {\n      if (isReadOnly || isDisabled) {\n        return;\n      }\n\n      const previousValue = selectedValue;\n      setValue(value);\n      if (value !== previousValue && onChange) {\n        onChange(value);\n      }\n    },\n  };\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledRadioGroup\n        color={color}\n        {...forwardedProps}\n        $isDisabled={isDisabled}\n        $isInvalid={isInvalid || (isRequired && selectedValue.length === 0)}\n        $isReadOnly={isReadOnly}\n        $orientation={orientation}\n        $theme={theme}\n        aria-disabled={isDisabled}\n        className={classNames(RadioGroup.className, className)}\n        ref={ref as RefObject<HTMLDivElement>}\n        role=\"radiogroup\"\n      >\n        <span className={`${RadioGroup.className}-label`}>\n          {label}\n          {isRequired ? ' *' : null}\n        </span>\n        <div className={`${RadioGroup.className}-boxes`}>\n          <RadioGroupContext.Provider value={state}>{children}</RadioGroupContext.Provider>\n        </div>\n        <span className={`${RadioGroup.className}-description`}>{description}</span>\n      </StyledRadioGroup>\n    </ThemeProvider>\n  );\n});\nRadioGroup.className = CLASSNAME;\nRadioGroup.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","RadioGroup","forwardRef","props","ref","children","className","color","ColorPalette","primary","defaultValue","description","isDisabled","isInvalid","isReadOnly","isRequired","label","onChange","orientation","RadioGroupOrientation","vertical","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","selectedValue","setValue","useState","useEffect","state","previousValue","React","createElement","ThemeProvider","StyledRadioGroup","_extends","$isDisabled","$isInvalid","length","$isReadOnly","$orientation","$theme","classNames","role","RadioGroupContext","Provider","displayName"],"mappings":"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"}

package/packages/design-system/src/components/radio-group/_internal/context.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const RadioGroupContext = /*#__PURE__*/React__default.createContext(null);
+
+export { RadioGroupContext };
+//# sourceMappingURL=context.js.map

package/packages/design-system/src/components/radio-group/_internal/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../../../../../src/components/radio-group/context.ts"],"sourcesContent":["import React from 'react';\nimport { RadioGroupState } from './types';\n\nexport const RadioGroupContext =\n  React.createContext<RadioGroupState | null>(null);\n"],"names":["RadioGroupContext","React","createContext"],"mappings":";;AAGO,MAAMA,iBAAiB,gBAC5BC,cAAK,CAACC,aAAa,CAAyB,IAAI;;;;"}

package/packages/design-system/src/components/radio-group/_internal/radio-group.js

@@ -0,0 +1,3 @@
+export { RadioGroupOrientation } from './types.js';
+export { RadioGroup } from './RadioGroup.js';
+//# sourceMappingURL=radio-group.js.map

package/packages/design-system/src/components/radio-group/_internal/radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-group.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/packages/design-system/src/components/radio-group/_internal/styles.js

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+import { RadioGroupOrientation } from './types.js';
+import { baseStyling } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledRadioGroup = styled.div`
+  ${baseStyling}
+
+  display: flex;
+  flex-direction: column;
+
+  ${_ref => {
+  let {
+    $orientation
+  } = _ref;
+  return $orientation === RadioGroupOrientation.vertical ? `
+    div.redsift-radio-group-boxes {
+      display: flex;
+      flex-direction: column;
+    }
+  ` : `
+    div.redsift-radio-group-boxes {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `;
+}}
+
+  span.redsift-radio-group-label {
+    font-family: var(--redsift-typography-body-font-family);
+    font-weight: var(--redsift-typography-body-font-weight);
+    font-size: var(--redsift-typography-body-font-size);
+    line-height: var(--redsift-typography-body-line-height);
+
+    ${_ref2 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref2;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
+}}
+  }
+
+  span.redsift-radio-group-description {
+    font-family: var(--redsift-typography-helper-font-family);
+    font-weight: var(--redsift-typography-helper-font-weight);
+    font-size: var(--redsift-typography-helper-font-size);
+    line-height: var(--redsift-typography-helper-line-height);
+
+    ${_ref3 => {
+  let {
+    $isDisabled,
+    $isInvalid,
+    $theme
+  } = _ref3;
+  return $isDisabled ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-radio-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-radio-text-default);
+          `;
+}}
+  }
+`;
+
+export { StyledRadioGroup };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/radio-group/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/radio-group/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { RadioGroupOrientation, StyledRadioGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledRadioGroup = styled.div<StyledRadioGroupProps>`\n  ${baseStyling}\n\n  display: flex;\n  flex-direction: column;\n\n  ${({ $orientation }) =>\n    $orientation === RadioGroupOrientation.vertical\n      ? `\n    div.redsift-radio-group-boxes {\n      display: flex;\n      flex-direction: column;\n    }\n  `\n      : `\n    div.redsift-radio-group-boxes {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n  `}\n\n  span.redsift-radio-group-label {\n    font-family: var(--redsift-typography-body-font-family);\n    font-weight: var(--redsift-typography-body-font-weight);\n    font-size: var(--redsift-typography-body-font-size);\n    line-height: var(--redsift-typography-body-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n  }\n\n  span.redsift-radio-group-description {\n    font-family: var(--redsift-typography-helper-font-family);\n    font-weight: var(--redsift-typography-helper-font-weight);\n    font-size: var(--redsift-typography-helper-font-size);\n    line-height: var(--redsift-typography-helper-line-height);\n\n    ${({ $isDisabled, $isInvalid, $theme }) =>\n      $isDisabled\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-radio-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-radio-text-default);\n          `}\n  }\n`;\n"],"names":["StyledRadioGroup","styled","div","baseStyling","_ref","$orientation","RadioGroupOrientation","vertical","_ref2","$isDisabled","$isInvalid","$theme","css","_ref3"],"mappings":";;;;AAIA;AACA;AACA;AACaA,MAAAA,gBAAgB,GAAGC,MAAM,CAACC,GAA2B,CAAA;AAClE,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,YAAAA;AAAa,GAAC,GAAAD,IAAA,CAAA;AAAA,EAAA,OACjBC,YAAY,KAAKC,qBAAqB,CAACC,QAAQ,GAC1C,CAAA;AACT;AACA;AACA;AACA;AACA,EAAA,CAAG,GACM,CAAA;AACT;AACA;AACA;AACA;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,KAAA,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAH,KAAA,CAAA;EAAA,OACpCC,WAAW,GACPG,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,GACDD,UAAU,GACVE,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAA,CAAW,GACDC,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAME,KAAA,IAAA;EAAA,IAAC;IAAEJ,WAAW;IAAEC,UAAU;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAE,KAAA,CAAA;EAAA,OACpCJ,WAAW,GACPG,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,GACDD,UAAU,GACVE,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAA,CAAW,GACDC,GAAI,CAAA;AACd,uCAAA,EAAyCD,MAAO,CAAA;AAChD,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;;;;"}

package/packages/design-system/src/components/radio-group/_internal/types.js

@@ -0,0 +1,18 @@
+/**
+ * Context props.
+ */
+
+/**
+ * Component orientation.
+ */
+const RadioGroupOrientation = {
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+};
+
+/**
+ * Component props.
+ */
+
+export { RadioGroupOrientation };
+//# sourceMappingURL=types.js.map

package/packages/design-system/src/components/radio-group/_internal/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../../../../../src/components/radio-group/types.ts"],"sourcesContent":["import { ComponentProps } from 'react';\nimport { StylingProps, Theme, ValueOf } from '../../types';\n\n/**\n * Context props.\n */\nexport type RadioGroupState = {\n  /** Whether the radio group is disabled or not. */\n  readonly isDisabled: boolean;\n  /** Whether the radio group is read only or not. */\n  readonly isReadOnly: boolean;\n  /** Sets the selected value. */\n  setValue(value: string): void;\n  /** Current selected value. */\n  readonly value: string;\n};\n\n/**\n * Component orientation.\n */\nexport const RadioGroupOrientation = {\n  horizontal: 'horizontal',\n  vertical: 'vertical',\n} as const;\nexport type RadioGroupOrientation = ValueOf<typeof RadioGroupOrientation>;\n\n/**\n * Component props.\n */\nexport interface RadioGroupProps extends Omit<ComponentProps<'div'>, 'onChange'>, StylingProps {\n  /**\n   * Default selected value.\n   * Used for uncontrolled version.\n   */\n  defaultValue?: string;\n  /** Description of the radio group. */\n  description?: string;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the component is invalid or not. */\n  isInvalid?: boolean;\n  /** Whether the component is read only or not. */\n  isReadOnly?: boolean;\n  /** Whether the component is required or not. */\n  isRequired?: boolean;\n  /** Label of the radio group. */\n  label?: string;\n  /** Method to handle component change. */\n  onChange?(values: string): void;\n  /** Method to handle component change. */\n  orientation?: RadioGroupOrientation;\n  /** Theme. */\n  theme?: Theme;\n  /**\n   * Currently selected value.\n   * Used for controlled version.\n   */\n  value?: string;\n}\n\nexport type StyledRadioGroupProps = Omit<\n  RadioGroupProps,\n  'isDisabled' | 'isInvalid' | 'isReadOnly' | 'orientation' | 'isRequired'\n> & {\n  $isDisabled: RadioGroupProps['isDisabled'];\n  $isInvalid: RadioGroupProps['isInvalid'];\n  $isReadOnly: RadioGroupProps['isReadOnly'];\n  $orientation: RadioGroupProps['orientation'];\n  $theme: RadioGroupProps['theme'];\n};\n"],"names":["RadioGroupOrientation","horizontal","vertical"],"mappings":"AAGA;AACA;AACA;;AAYA;AACA;AACA;AACO,MAAMA,qBAAqB,GAAG;AACnCC,EAAAA,UAAU,EAAE,YAAY;AACxBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;;;"}

package/packages/design-system/src/components/shared/_internal/shared.js

@@ -0,0 +1,2 @@
+export { baseBorder, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, focusRing, srOnly } from './styles.js';
+//# sourceMappingURL=shared.js.map

package/packages/design-system/src/components/shared/_internal/styles.js

@@ -0,0 +1,250 @@
+import { css } from 'styled-components';
+
+const baseLayout = css`
+  ${_ref => {
+  let {
+    flex,
+    flexGrow,
+    flexShrink,
+    flexBasis,
+    alignSelf,
+    justifySelf,
+    order,
+    gridArea,
+    gridColumn,
+    gridRow,
+    gridColumnStart,
+    gridColumnEnd,
+    gridRowStart,
+    gridRowEnd
+  } = _ref;
+  return css`
+      ${flex ? `flex: ${flex};` : ''}
+      ${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}
+      ${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}
+      ${flexBasis ? `flex-basis: ${flexBasis};` : ''}
+      ${alignSelf ? `align-self: ${alignSelf};` : ''}
+      ${justifySelf ? `justify-self: ${justifySelf};` : ''}
+      ${order !== undefined ? `order: ${order};` : ''}
+      ${gridArea ? `grid-area: ${gridArea};` : ''}
+      ${gridColumn ? `grid-column: ${gridColumn};` : ''}
+      ${gridRow ? `grid-row: ${gridRow};` : ''}
+      ${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}
+      ${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}
+      ${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}
+      ${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}
+    `;
+}}
+`;
+const baseSpacing = css`
+  ${_ref2 => {
+  let {
+    margin,
+    marginBottom,
+    marginLeft,
+    marginRight,
+    marginTop
+  } = _ref2;
+  return css`
+      ${margin ? `margin: ${margin};` : ''}
+      ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}
+      ${marginLeft ? `margin-left: ${marginLeft};` : ''}
+      ${marginRight ? `margin-right: ${marginRight};` : ''}
+      ${marginTop ? `margin-top: ${marginTop};` : ''}
+    `;
+}}
+`;
+const baseInternalSpacing = css`
+  ${_ref3 => {
+  let {
+    padding,
+    paddingBottom,
+    paddingLeft,
+    paddingRight,
+    paddingTop
+  } = _ref3;
+  return css`
+      ${padding ? `padding: ${padding};` : ''}
+      ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}
+      ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}
+      ${paddingRight ? `padding-right: ${paddingRight};` : ''}
+      ${paddingTop ? `padding-top: ${paddingTop};` : ''}
+    `;
+}}
+`;
+const baseSizing = css`
+  ${_ref4 => {
+  let {
+    height,
+    maxHeight,
+    maxWidth,
+    minHeight,
+    minWidth,
+    width
+  } = _ref4;
+  return css`
+      ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}
+      ${maxHeight ? `max-height: ${maxHeight};` : ''}
+      ${maxWidth ? `max-width: ${maxWidth};` : ''}
+      ${minHeight ? `min-height: ${minHeight};` : ''}
+      ${minWidth ? `min-width: ${minWidth};` : ''}
+      ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}
+    `;
+}}
+`;
+const basePositioning = css`
+  ${_ref5 => {
+  let {
+    position,
+    top,
+    bottom,
+    left,
+    right,
+    zIndex
+  } = _ref5;
+  return css`
+      ${position ? `position: ${position};` : ''}
+      ${top ? `top: ${top};` : ''}
+      ${bottom ? `bottom: ${bottom};` : ''}
+      ${left ? `left: ${left};` : ''}
+      ${right ? `right: ${right};` : ''}
+      ${zIndex ? `z-index: ${zIndex};` : ''}
+    `;
+}}
+`;
+const baseBorder = css`
+  ${_ref6 => {
+  let {
+    background,
+    backgroundColor,
+    border,
+    borderTop,
+    borderBottom,
+    borderLeft,
+    borderRight,
+    borderRadius,
+    boxShadow
+  } = _ref6;
+  return css`
+      ${background ? `background: ${background};` : ''}
+      ${backgroundColor ? `background-color: ${backgroundColor};` : ''}
+      ${border ? `border: ${border};` : ''}
+      ${borderTop ? `border-top: ${borderTop};` : ''}
+      ${borderBottom ? `border-bottom: ${borderBottom};` : ''}
+      ${borderLeft ? `border-left: ${borderLeft};` : ''}
+      ${borderRight ? `border-right: ${borderRight};` : ''}
+      ${borderRadius ? `border-radius: ${borderRadius};` : ''}
+      ${boxShadow ? `box-shadow: ${boxShadow};` : ''}
+    `;
+}}
+`;
+const baseFlexbox = css`
+  ${_ref7 => {
+  let {
+    alignContent,
+    alignItems,
+    flexDirection,
+    flexWrap,
+    gap,
+    justifyContent
+  } = _ref7;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${flexDirection ? `flex-direction: ${flexDirection};` : ''}
+      ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}
+      gap: ${gap};
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+    `;
+}}
+`;
+const baseGrid = css`
+  ${_ref8 => {
+  let {
+    alignContent,
+    alignItems,
+    gap,
+    gridAutoColumns,
+    gridAutoRows,
+    gridTemplateAreas,
+    gridTemplateColumns,
+    gridTemplateRows,
+    justifyContent,
+    justifyItems
+  } = _ref8;
+  return css`
+      ${alignContent ? `align-content: ${alignContent};` : ''}
+      ${alignItems ? `align-items: ${alignItems};` : ''}
+      ${gap ? `gap: ${gap};` : ''}
+      ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}
+      ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}
+      ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}
+      ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}
+      ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}
+      ${justifyContent ? `justify-content: ${justifyContent};` : ''}
+      ${justifyItems ? `justify-items: ${justifyItems};` : ''}
+    `;
+}}
+`;
+const baseStyling = css`
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: var(--redsift-typography-body-line-height);
+
+  ${baseLayout}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
+`;
+const baseContainer = css`
+  ${_ref9 => {
+  let {
+    display
+  } = _ref9;
+  return display ? `display: ${display};` : '';
+}}
+  font-family: var(--redsift-typography-body-font-family);
+  font-size: var(--redsift-typography-body-font-size);
+  font-weight: var(--redsift-typography-body-font-weight);
+  line-height: 20px;
+
+  ${baseInternalSpacing}
+  ${baseSpacing}
+  ${baseSizing}
+  ${basePositioning}
+  ${baseGrid}
+  ${baseFlexbox}
+`;
+const focusRing = css`
+  @media (prefers-reduced-motion: no-preference) {
+    :focus-visible {
+      outline: 2px solid var(--redsift-color-primary-n);
+      transition: outline-offset 75ms ease-out;
+    }
+
+    :not(:active):focus-visible {
+      transition-duration: 0.25s;
+    }
+  }
+
+  :not(:active):focus-visible {
+    outline-offset: 0.2rem;
+  }
+`;
+const srOnly = css`
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  overflow: hidden !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+`;
+
+export { baseBorder, baseContainer, baseFlexbox, baseGrid, baseInternalSpacing, baseLayout, basePositioning, baseSizing, baseSpacing, baseStyling, focusRing, srOnly };
+//# sourceMappingURL=styles.js.map

package/packages/design-system/src/components/shared/_internal/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/shared/styles.ts"],"sourcesContent":["import { css } from 'styled-components';\nimport {\n  LayoutProps,\n  SpacingProps,\n  SizingProps,\n  PositioningProps,\n  FlexLayoutProps,\n  GridLayoutProps,\n  StylingProps,\n  ContainerProps,\n  InternalSpacingProps,\n  BorderProps,\n} from '../../types';\n\nexport const baseLayout = css<LayoutProps>`\n  ${({\n    flex,\n    flexGrow,\n    flexShrink,\n    flexBasis,\n    alignSelf,\n    justifySelf,\n    order,\n    gridArea,\n    gridColumn,\n    gridRow,\n    gridColumnStart,\n    gridColumnEnd,\n    gridRowStart,\n    gridRowEnd,\n  }) =>\n    css`\n      ${flex ? `flex: ${flex};` : ''}\n      ${flexGrow !== undefined ? `flex-grow: ${flexGrow};` : ''}\n      ${flexShrink !== undefined ? `flex-shrink: ${flexShrink};` : ''}\n      ${flexBasis ? `flex-basis: ${flexBasis};` : ''}\n      ${alignSelf ? `align-self: ${alignSelf};` : ''}\n      ${justifySelf ? `justify-self: ${justifySelf};` : ''}\n      ${order !== undefined ? `order: ${order};` : ''}\n      ${gridArea ? `grid-area: ${gridArea};` : ''}\n      ${gridColumn ? `grid-column: ${gridColumn};` : ''}\n      ${gridRow ? `grid-row: ${gridRow};` : ''}\n      ${gridColumnStart ? `grid-column-start: ${gridColumnStart};` : ''}\n      ${gridColumnEnd ? `grid-column-end: ${gridColumnEnd};` : ''}\n      ${gridRowStart ? `grid-row-start: ${gridRowStart};` : ''}\n      ${gridRowEnd ? `grid-row-end: ${gridRowEnd};` : ''}\n    `}\n`;\n\nexport const baseSpacing = css<SpacingProps>`\n  ${({ margin, marginBottom, marginLeft, marginRight, marginTop }) =>\n    css`\n      ${margin ? `margin: ${margin};` : ''}\n      ${marginBottom ? `margin-bottom: ${marginBottom};` : ''}\n      ${marginLeft ? `margin-left: ${marginLeft};` : ''}\n      ${marginRight ? `margin-right: ${marginRight};` : ''}\n      ${marginTop ? `margin-top: ${marginTop};` : ''}\n    `}\n`;\n\nexport const baseInternalSpacing = css<InternalSpacingProps>`\n  ${({ padding, paddingBottom, paddingLeft, paddingRight, paddingTop }) =>\n    css`\n      ${padding ? `padding: ${padding};` : ''}\n      ${paddingBottom ? `padding-bottom: ${paddingBottom};` : ''}\n      ${paddingLeft ? `padding-left: ${paddingLeft};` : ''}\n      ${paddingRight ? `padding-right: ${paddingRight};` : ''}\n      ${paddingTop ? `padding-top: ${paddingTop};` : ''}\n    `}\n`;\n\nexport const baseSizing = css<SizingProps>`\n  ${({ height, maxHeight, maxWidth, minHeight, minWidth, width }) =>\n    css`\n      ${height !== undefined ? `height: ${typeof height === 'number' ? `${height}px` : height};` : ''}\n      ${maxHeight ? `max-height: ${maxHeight};` : ''}\n      ${maxWidth ? `max-width: ${maxWidth};` : ''}\n      ${minHeight ? `min-height: ${minHeight};` : ''}\n      ${minWidth ? `min-width: ${minWidth};` : ''}\n      ${width !== undefined ? `width: ${typeof width === 'number' ? `${width}px` : width};` : ''}\n    `}\n`;\n\nexport const basePositioning = css<PositioningProps>`\n  ${({ position, top, bottom, left, right, zIndex }) =>\n    css`\n      ${position ? `position: ${position};` : ''}\n      ${top ? `top: ${top};` : ''}\n      ${bottom ? `bottom: ${bottom};` : ''}\n      ${left ? `left: ${left};` : ''}\n      ${right ? `right: ${right};` : ''}\n      ${zIndex ? `z-index: ${zIndex};` : ''}\n    `}\n`;\n\nexport const baseBorder = css<BorderProps>`\n  ${({\n    background,\n    backgroundColor,\n    border,\n    borderTop,\n    borderBottom,\n    borderLeft,\n    borderRight,\n    borderRadius,\n    boxShadow,\n  }) =>\n    css`\n      ${background ? `background: ${background};` : ''}\n      ${backgroundColor ? `background-color: ${backgroundColor};` : ''}\n      ${border ? `border: ${border};` : ''}\n      ${borderTop ? `border-top: ${borderTop};` : ''}\n      ${borderBottom ? `border-bottom: ${borderBottom};` : ''}\n      ${borderLeft ? `border-left: ${borderLeft};` : ''}\n      ${borderRight ? `border-right: ${borderRight};` : ''}\n      ${borderRadius ? `border-radius: ${borderRadius};` : ''}\n      ${boxShadow ? `box-shadow: ${boxShadow};` : ''}\n    `}\n`;\n\nexport const baseFlexbox = css<FlexLayoutProps>`\n  ${({ alignContent, alignItems, flexDirection, flexWrap, gap, justifyContent }) =>\n    css`\n      ${alignContent ? `align-content: ${alignContent};` : ''}\n      ${alignItems ? `align-items: ${alignItems};` : ''}\n      ${flexDirection ? `flex-direction: ${flexDirection};` : ''}\n      ${flexWrap ? `flex-wrap: ${flexWrap};` : ''}\n      gap: ${gap};\n      ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n    `}\n`;\n\nexport const baseGrid = css<GridLayoutProps>`\n  ${({\n    alignContent,\n    alignItems,\n    gap,\n    gridAutoColumns,\n    gridAutoRows,\n    gridTemplateAreas,\n    gridTemplateColumns,\n    gridTemplateRows,\n    justifyContent,\n    justifyItems,\n  }) =>\n    css`\n      ${alignContent ? `align-content: ${alignContent};` : ''}\n      ${alignItems ? `align-items: ${alignItems};` : ''}\n      ${gap ? `gap: ${gap};` : ''}\n      ${gridAutoColumns ? `grid-auto-columns: ${gridAutoColumns};` : ''}\n      ${gridAutoRows ? `grid-auto-rows: ${gridAutoRows};` : ''}\n      ${gridTemplateAreas ? `grid-template-areas: ${gridTemplateAreas};` : ''}\n      ${gridTemplateColumns ? `grid-template-columns: ${gridTemplateColumns};` : ''}\n      ${gridTemplateRows ? `grid-template-rows: ${gridTemplateRows};` : ''}\n      ${justifyContent ? `justify-content: ${justifyContent};` : ''}\n      ${justifyItems ? `justify-items: ${justifyItems};` : ''}\n    `}\n`;\n\nexport const baseStyling = css<StylingProps>`\n  font-family: var(--redsift-typography-body-font-family);\n  font-size: var(--redsift-typography-body-font-size);\n  font-weight: var(--redsift-typography-body-font-weight);\n  line-height: var(--redsift-typography-body-line-height);\n\n  ${baseLayout}\n  ${baseSpacing}\n  ${baseSizing}\n  ${basePositioning}\n`;\n\nexport const baseContainer = css<ContainerProps>`\n  ${({ display }) => (display ? `display: ${display};` : '')}\n  font-family: var(--redsift-typography-body-font-family);\n  font-size: var(--redsift-typography-body-font-size);\n  font-weight: var(--redsift-typography-body-font-weight);\n  line-height: 20px;\n\n  ${baseInternalSpacing}\n  ${baseSpacing}\n  ${baseSizing}\n  ${basePositioning}\n  ${baseGrid}\n  ${baseFlexbox}\n`;\n\nexport const focusRing = css`\n  @media (prefers-reduced-motion: no-preference) {\n    :focus-visible {\n      outline: 2px solid var(--redsift-color-primary-n);\n      transition: outline-offset 75ms ease-out;\n    }\n\n    :not(:active):focus-visible {\n      transition-duration: 0.25s;\n    }\n  }\n\n  :not(:active):focus-visible {\n    outline-offset: 0.2rem;\n  }\n`;\n\nexport const srOnly = css`\n  border: 0 !important;\n  clip: rect(1px, 1px, 1px, 1px) !important;\n  -webkit-clip-path: inset(50%) !important;\n  clip-path: inset(50%) !important;\n  height: 1px !important;\n  overflow: hidden !important;\n  margin: -1px !important;\n  padding: 0 !important;\n  position: absolute !important;\n  width: 1px !important;\n  white-space: nowrap !important;\n`;\n"],"names":["baseLayout","css","_ref","flex","flexGrow","flexShrink","flexBasis","alignSelf","justifySelf","order","gridArea","gridColumn","gridRow","gridColumnStart","gridColumnEnd","gridRowStart","gridRowEnd","undefined","baseSpacing","_ref2","margin","marginBottom","marginLeft","marginRight","marginTop","baseInternalSpacing","_ref3","padding","paddingBottom","paddingLeft","paddingRight","paddingTop","baseSizing","_ref4","height","maxHeight","maxWidth","minHeight","minWidth","width","basePositioning","_ref5","position","top","bottom","left","right","zIndex","baseBorder","_ref6","background","backgroundColor","border","borderTop","borderBottom","borderLeft","borderRight","borderRadius","boxShadow","baseFlexbox","_ref7","alignContent","alignItems","flexDirection","flexWrap","gap","justifyContent","baseGrid","_ref8","gridAutoColumns","gridAutoRows","gridTemplateAreas","gridTemplateColumns","gridTemplateRows","justifyItems","baseStyling","baseContainer","_ref9","display","focusRing","srOnly"],"mappings":"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"}