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

package/packages/design-system/src/components/card-header/_internal/CardHeader.js

@@ -0,0 +1,56 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { StyledCardHeader } from './styles.js';
+import { Skeleton } from '../../skeleton/_internal/Skeleton2.js';
+import { Heading } from '../../heading/_internal/Heading2.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+
+const _excluded = ["children", "className", "header", "headingProps", "icon", "iconProps", "isLoading", "subheader"];
+const COMPONENT_NAME = 'CardHeader';
+const CLASSNAME = 'redsift-card-header';
+
+/**
+ * The CardHeader component.
+ */
+const CardHeader = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      header,
+      headingProps,
+      icon,
+      iconProps,
+      isLoading,
+      subheader
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  return /*#__PURE__*/React__default.createElement(StyledCardHeader, _extends({}, forwardedProps, {
+    className: classNames(CardHeader.className, className),
+    ref: ref
+  }), subheader ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: "body",
+    isLoaded: !isLoading
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${CardHeader.className}__subheader`
+  }, subheader)) : null, header ? /*#__PURE__*/React__default.createElement(Skeleton.Text, {
+    variant: (headingProps === null || headingProps === void 0 ? void 0 : headingProps.variant) || 'h2',
+    isLoaded: !isLoading,
+    marginTop: "10px",
+    marginBottom: "10px"
+  }, /*#__PURE__*/React__default.createElement(Heading, _extends({
+    as: "h2",
+    color: "black",
+    className: `${CardHeader.className}__header`,
+    variant: "h2"
+  }, headingProps), icon ? /*#__PURE__*/React__default.createElement(Icon, _extends({
+    icon: icon,
+    "aria-hidden": "true",
+    size: "large"
+  }, iconProps)) : null, header)) : null, children);
+});
+CardHeader.className = CLASSNAME;
+CardHeader.displayName = COMPONENT_NAME;
+
+export { CardHeader };
+//# sourceMappingURL=CardHeader.js.map

package/packages/design-system/src/components/card-header/_internal/CardHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardHeader.js","sources":["../../../../../../../src/components/card-header/CardHeader.tsx"],"sourcesContent":["import React, { forwardRef, RefObject } from 'react';\nimport classNames from 'classnames';\n\nimport { Icon } from '../icon';\nimport { Heading } from '../heading';\nimport { Comp } from '../../types';\nimport { StyledCardHeader } from './styles';\nimport { CardHeaderProps } from './types';\nimport { Skeleton } from '../skeleton';\n\nconst COMPONENT_NAME = 'CardHeader';\nconst CLASSNAME = 'redsift-card-header';\n\n/**\n * The CardHeader component.\n */\nexport const CardHeader: Comp<CardHeaderProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const { children, className, header, headingProps, icon, iconProps, isLoading, subheader, ...forwardedProps } = props;\n\n  return (\n    <StyledCardHeader\n      {...forwardedProps}\n      className={classNames(CardHeader.className, className)}\n      ref={ref as RefObject<HTMLDivElement>}\n    >\n      {subheader ? (\n        <Skeleton.Text variant=\"body\" isLoaded={!isLoading}>\n          <div className={`${CardHeader.className}__subheader`}>{subheader}</div>\n        </Skeleton.Text>\n      ) : null}\n      {header ? (\n        <Skeleton.Text\n          variant={headingProps?.variant || 'h2'}\n          isLoaded={!isLoading}\n          marginTop=\"10px\"\n          marginBottom=\"10px\"\n        >\n          <Heading as=\"h2\" color=\"black\" className={`${CardHeader.className}__header`} variant=\"h2\" {...headingProps}>\n            {icon ? <Icon icon={icon} aria-hidden=\"true\" size=\"large\" {...iconProps} /> : null}\n            {header}\n          </Heading>\n        </Skeleton.Text>\n      ) : null}\n      {children}\n    </StyledCardHeader>\n  );\n});\nCardHeader.className = CLASSNAME;\nCardHeader.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","CardHeader","forwardRef","props","ref","children","className","header","headingProps","icon","iconProps","isLoading","subheader","forwardedProps","_objectWithoutProperties","_excluded","React","createElement","StyledCardHeader","_extends","classNames","Skeleton","Text","variant","isLoaded","marginTop","marginBottom","Heading","as","color","Icon","size","displayName"],"mappings":";;;;;;;;;AAUA,MAAMA,cAAc,GAAG,YAAY,CAAA;AACnC,MAAMC,SAAS,GAAG,qBAAqB,CAAA;;AAEvC;AACA;AACA;AACO,MAAMC,UAAiD,gBAAGC,UAAU,CAAC,CAACC,KAAK,EAAEC,GAAG,KAAK;EAC1F,MAAM;MAAEC,QAAQ;MAAEC,SAAS;MAAEC,MAAM;MAAEC,YAAY;MAAEC,IAAI;MAAEC,SAAS;MAAEC,SAAS;AAAEC,MAAAA,SAAAA;AAA6B,KAAC,GAAGT,KAAK;AAAxBU,IAAAA,cAAc,GAAAC,wBAAA,CAAKX,KAAK,EAAAY,SAAA,CAAA,CAAA;EAErH,oBACEC,cAAA,CAAAC,aAAA,CAACC,gBAAgB,EAAAC,QAAA,KACXN,cAAc,EAAA;IAClBP,SAAS,EAAEc,UAAU,CAACnB,UAAU,CAACK,SAAS,EAAEA,SAAS,CAAE;AACvDF,IAAAA,GAAG,EAAEA,GAAAA;GAEJQ,CAAAA,EAAAA,SAAS,gBACRI,cAAA,CAAAC,aAAA,CAACI,QAAQ,CAACC,IAAI,EAAA;AAACC,IAAAA,OAAO,EAAC,MAAM;AAACC,IAAAA,QAAQ,EAAE,CAACb,SAAAA;GACvCK,eAAAA,cAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKX,IAAAA,SAAS,EAAG,CAAA,EAAEL,UAAU,CAACK,SAAU,CAAA,WAAA,CAAA;AAAa,GAAA,EAAEM,SAAe,CACzD,CAAC,GACd,IAAI,EACPL,MAAM,gBACLS,cAAA,CAAAC,aAAA,CAACI,QAAQ,CAACC,IAAI,EAAA;IACZC,OAAO,EAAE,CAAAf,YAAY,KAAZA,IAAAA,IAAAA,YAAY,uBAAZA,YAAY,CAAEe,OAAO,KAAI,IAAK;IACvCC,QAAQ,EAAE,CAACb,SAAU;AACrBc,IAAAA,SAAS,EAAC,MAAM;AAChBC,IAAAA,YAAY,EAAC,MAAA;AAAM,GAAA,eAEnBV,cAAA,CAAAC,aAAA,CAACU,OAAO,EAAAR,QAAA,CAAA;AAACS,IAAAA,EAAE,EAAC,IAAI;AAACC,IAAAA,KAAK,EAAC,OAAO;AAACvB,IAAAA,SAAS,EAAG,CAAA,EAAEL,UAAU,CAACK,SAAU,CAAU,QAAA,CAAA;AAACiB,IAAAA,OAAO,EAAC,IAAA;GAASf,EAAAA,YAAY,CACvGC,EAAAA,IAAI,gBAAGO,cAAA,CAAAC,aAAA,CAACa,IAAI,EAAAX,QAAA,CAAA;AAACV,IAAAA,IAAI,EAAEA,IAAK;AAAC,IAAA,aAAA,EAAY,MAAM;AAACsB,IAAAA,IAAI,EAAC,OAAA;AAAO,GAAA,EAAKrB,SAAS,CAAG,CAAC,GAAG,IAAI,EACjFH,MACM,CACI,CAAC,GACd,IAAI,EACPF,QACe,CAAC,CAAA;AAEvB,CAAC,EAAC;AACFJ,UAAU,CAACK,SAAS,GAAGN,SAAS,CAAA;AAChCC,UAAU,CAAC+B,WAAW,GAAGjC,cAAc;;;;"}

package/packages/design-system/src/components/card-header/_internal/card-header.js

@@ -0,0 +1,2 @@
+export { CardHeader } from './CardHeader.js';
+//# sourceMappingURL=card-header.js.map

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

@@ -0,0 +1,31 @@
+import styled from 'styled-components';
+import { baseStyling, baseFlexbox } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledCardHeader = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  ${baseStyling}
+  ${baseFlexbox}
+
+  .redsift-card-header__header {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    padding: 10px 0px;
+    margin: 0px;
+  }
+
+  .redsift-card-header__subheader {
+    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);
+  }
+`;
+
+export { StyledCardHeader };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/card-header/styles.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { StyledCardHeaderProps } from './types';\nimport { baseFlexbox, baseStyling } from '../shared';\n\n/**\n * Component style.\n */\nexport const StyledCardHeader = styled.div<StyledCardHeaderProps>`\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  ${baseStyling}\n  ${baseFlexbox}\n\n  .redsift-card-header__header {\n    align-items: center;\n    display: flex;\n    gap: 8px;\n    padding: 10px 0px;\n    margin: 0px;\n  }\n\n  .redsift-card-header__subheader {\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`;\n"],"names":["StyledCardHeader","styled","div","baseStyling","baseFlexbox"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,gBAAgB,GAAGC,MAAM,CAACC,GAA2B,CAAA;AAClE;AACA;AACA;AACA,EAAA,EAAIC,WAAY,CAAA;AAChB,EAAA,EAAIC,WAAY,CAAA;AAChB;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/packages/design-system/src/components/checkbox/_internal/Checkbox2.js

@@ -0,0 +1,135 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../../../../../_virtual/_internal/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useContext, useState, useEffect, useCallback } from 'react';
+import classNames from 'classnames';
+import { mdiCheckboxMarked, mdiMinusBox, mdiCheckboxBlankOutline } from '@redsift/icons';
+import { CheckboxGroupContext } from '../../checkbox-group/_internal/context.js';
+import { warnIfNoAccessibleLabelFound } from '../../../utils/_internal/warnIfNoAccessibleLabelFound.js';
+import { StyledCheckbox } from './styles.js';
+import { useFocusRing } from '../../../react-aria/react-aria/focus/_internal/useFocusRing.js';
+import { useTheme } from '../../theme/_internal/useTheme.js';
+import { Icon } from '../../icon/_internal/Icon2.js';
+
+const _excluded = ["aria-label", "aria-labelledby", "autoFocus", "children", "className", "defaultSelected", "inputProps", "inputRef", "isColored", "isDisabled", "isIndeterminate", "isInvalid", "isReadOnly", "isRequired", "isSelected", "name", "onChange", "theme", "value"];
+const COMPONENT_NAME = 'Checkbox';
+const CLASSNAME = 'redsift-checkbox';
+
+/**
+ * The Checkbox component.
+ * Works both inside a CheckboxGroup or as standalone.
+ * Can be used as controlled or uncontrolled.
+ */
+const Checkbox = /*#__PURE__*/forwardRef((props, ref) => {
+  var _isDisabled, _isReadOnly, _ref;
+  const groupState = useContext(CheckboxGroupContext);
+  let {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      autoFocus,
+      children,
+      className,
+      defaultSelected,
+      inputProps,
+      inputRef,
+      isColored = true,
+      isDisabled,
+      isIndeterminate,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      isSelected: propsIsSelected,
+      name,
+      onChange,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const {
+    isFocusVisible,
+    focusProps
+  } = useFocusRing({
+    autoFocus
+  });
+  isDisabled = (_isDisabled = isDisabled) !== null && _isDisabled !== void 0 ? _isDisabled : groupState === null || groupState === void 0 ? void 0 : groupState.isDisabled;
+  isReadOnly = (_isReadOnly = isReadOnly) !== null && _isReadOnly !== void 0 ? _isReadOnly : groupState === null || groupState === void 0 ? void 0 : groupState.isReadOnly;
+  const [isSelected, setSelected] = useState(Boolean((_ref = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected) !== null && _ref !== void 0 ? _ref : groupState === null || groupState === void 0 ? void 0 : groupState.value.includes(value)));
+  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;
+  useEffect(() => {
+    setSelected(Boolean(propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : defaultSelected));
+  }, [propsIsSelected, defaultSelected]);
+  useEffect(() => {
+    if (groupState) {
+      setSelected(groupState.value.includes(value));
+    }
+  }, [groupState === null || groupState === void 0 ? void 0 : groupState.value]);
+  warnIfNoAccessibleLabelFound(props, [children], 'Checkbox');
+  if (groupState) {
+    if (propsIsSelected != null) {
+      console.warn('isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (defaultSelected != null) {
+      console.warn('defaultSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.');
+    }
+    if (props.value == null) {
+      console.warn('A <Checkbox> element within a <CheckboxGroup> requires a `value` property unless the <Checkbox> is controlled.');
+    }
+  }
+  const handleChange = useCallback(event => {
+    if (isDisabled || isReadOnly) {
+      return;
+    }
+    if (groupState) {
+      if (!groupState.value.includes(value)) {
+        groupState.addValue(value);
+      } else {
+        groupState.removeValue(value);
+      }
+    }
+    if (isControlled) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(!propsIsSelected, value, name, event, groupState);
+    } else {
+      setSelected(!isSelected);
+      onChange === null || onChange === void 0 ? void 0 : onChange(!isSelected, value, name, event, groupState);
+    }
+  }, [onChange, groupState, isSelected, propsIsSelected]);
+  return /*#__PURE__*/React__default.createElement(StyledCheckbox, _extends({}, forwardedProps, {
+    $isColored: isColored,
+    $isDisabled: isDisabled,
+    $isFocusVisible: isFocusVisible,
+    $isInvalid: isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    $isRequired: isRequired,
+    $isSelected: isSelected || isControlled && propsIsSelected,
+    $theme: theme,
+    className: classNames(Checkbox.className, className),
+    ref: ref
+  }), isSelected || isControlled && propsIsSelected ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxMarked
+  }) : isIndeterminate ? /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiMinusBox
+  }) : /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiCheckboxBlankOutline
+  }), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: "label"
+  }, children) : null, /*#__PURE__*/React__default.createElement("input", _extends({}, inputProps, focusProps, {
+    "aria-checked": isSelected || isControlled && propsIsSelected ? 'true' : isIndeterminate ? 'mixed' : 'false',
+    "aria-disabled": isDisabled,
+    "aria-invalid": isInvalid || isRequired && !(isSelected || isControlled && propsIsSelected),
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-readonly": isReadOnly,
+    "aria-required": isRequired,
+    autoFocus: autoFocus,
+    checked: isSelected || isControlled && propsIsSelected ? true : false,
+    disabled: isDisabled,
+    name: name,
+    onChange: handleChange,
+    ref: inputRef,
+    type: "checkbox",
+    value: value
+  })));
+});
+Checkbox.className = CLASSNAME;
+Checkbox.displayName = COMPONENT_NAME;
+
+export { Checkbox };
+//# sourceMappingURL=Checkbox2.js.map

package/packages/design-system/src/components/checkbox/_internal/Checkbox2.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox2.js","sources":["../../../../../../../src/components/checkbox/Checkbox.tsx"],"sourcesContent":["import React, {\n  ComponentProps,\n  forwardRef,\n  MutableRefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { useFocusRing } from '../../react-aria/react-aria/focus';\nimport { mdiCheckboxBlankOutline, mdiMinusBox, mdiCheckboxMarked } from '@redsift/icons';\nimport { Comp } from '../../types';\nimport { Icon } from '../icon';\nimport { CheckboxGroupContext } from '../checkbox-group/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { CheckboxProps } from './types';\nimport { StyledCheckbox } from './styles';\nimport { useTheme } from '../theme';\n\nconst COMPONENT_NAME = 'Checkbox';\nconst CLASSNAME = 'redsift-checkbox';\n\n/**\n * The Checkbox component.\n * Works both inside a CheckboxGroup or as standalone.\n * Can be used as controlled or uncontrolled.\n */\nexport const Checkbox: Comp<CheckboxProps, HTMLLabelElement> = forwardRef((props, ref) => {\n  const groupState = useContext(CheckboxGroupContext);\n\n  let {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    autoFocus,\n    children,\n    className,\n    defaultSelected,\n    inputProps,\n    inputRef,\n    isColored = true,\n    isDisabled,\n    isIndeterminate,\n    isInvalid,\n    isReadOnly,\n    isRequired,\n    isSelected: propsIsSelected,\n    name,\n    onChange,\n    theme: propsTheme,\n    value,\n    ...forwardedProps\n  } = props;\n\n  const theme = useTheme(propsTheme);\n\n  const { isFocusVisible, focusProps } = useFocusRing({ autoFocus });\n  isDisabled = isDisabled ?? groupState?.isDisabled;\n  isReadOnly = isReadOnly ?? groupState?.isReadOnly;\n\n  const [isSelected, setSelected] = useState(\n    Boolean(propsIsSelected ?? defaultSelected ?? groupState?.value.includes(value as string))\n  );\n  const isControlled = propsIsSelected !== null && propsIsSelected !== undefined;\n\n  useEffect(() => {\n    setSelected(Boolean(propsIsSelected ?? defaultSelected));\n  }, [propsIsSelected, defaultSelected]);\n\n  useEffect(() => {\n    if (groupState) {\n      setSelected(groupState.value.includes(value as string));\n    }\n  }, [groupState?.value]);\n\n  warnIfNoAccessibleLabelFound(props as ComponentProps<'label'>, [children], 'Checkbox');\n\n  if (groupState) {\n    if (propsIsSelected != null) {\n      console.warn(\n        'isSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.'\n      );\n    }\n    if (defaultSelected != null) {\n      console.warn(\n        'defaultSelected is unsupported on individual <Checkbox> elements within a <CheckboxGroup> unless the <Checkbox> is controlled. Please apply this prop to the group instead or pass isControlled to the component.'\n      );\n    }\n    if (props.value == null) {\n      console.warn(\n        'A <Checkbox> element within a <CheckboxGroup> requires a `value` property unless the <Checkbox> is controlled.'\n      );\n    }\n  }\n\n  const handleChange = useCallback(\n    (event: React.ChangeEvent<HTMLInputElement>) => {\n      if (isDisabled || isReadOnly) {\n        return;\n      }\n\n      if (groupState) {\n        if (!groupState.value.includes(value as string)) {\n          groupState.addValue(value as string);\n        } else {\n          groupState.removeValue(value as string);\n        }\n      }\n\n      if (isControlled) {\n        onChange?.(!propsIsSelected, value, name, event, groupState!);\n      } else {\n        setSelected(!isSelected);\n        onChange?.(!isSelected, value, name, event, groupState!);\n      }\n    },\n    [onChange, groupState, isSelected, propsIsSelected]\n  );\n\n  return (\n    <StyledCheckbox\n      {...forwardedProps}\n      $isColored={isColored}\n      $isDisabled={isDisabled}\n      $isFocusVisible={isFocusVisible}\n      $isInvalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n      $isRequired={isRequired}\n      $isSelected={isSelected || (isControlled && propsIsSelected)}\n      $theme={theme}\n      className={classNames(Checkbox.className, className)}\n      ref={ref as MutableRefObject<HTMLLabelElement>}\n    >\n      {isSelected || (isControlled && propsIsSelected) ? (\n        <Icon icon={mdiCheckboxMarked} />\n      ) : isIndeterminate ? (\n        <Icon icon={mdiMinusBox} />\n      ) : (\n        <Icon icon={mdiCheckboxBlankOutline} />\n      )}\n      {children ? <span className=\"label\">{children}</span> : null}\n      <input\n        {...inputProps}\n        {...focusProps}\n        aria-checked={isSelected || (isControlled && propsIsSelected) ? 'true' : isIndeterminate ? 'mixed' : 'false'}\n        aria-disabled={isDisabled}\n        aria-invalid={isInvalid || (isRequired && !(isSelected || (isControlled && propsIsSelected)))}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        aria-readonly={isReadOnly}\n        aria-required={isRequired}\n        autoFocus={autoFocus}\n        checked={isSelected || (isControlled && propsIsSelected) ? true : false}\n        disabled={isDisabled}\n        name={name}\n        onChange={handleChange}\n        ref={inputRef as MutableRefObject<HTMLInputElement>}\n        type=\"checkbox\"\n        value={value}\n      />\n    </StyledCheckbox>\n  );\n});\nCheckbox.className = CLASSNAME;\nCheckbox.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","Checkbox","forwardRef","props","ref","_isDisabled","_isReadOnly","_ref","groupState","useContext","CheckboxGroupContext","ariaLabel","ariaLabelledby","autoFocus","children","className","defaultSelected","inputProps","inputRef","isColored","isDisabled","isIndeterminate","isInvalid","isReadOnly","isRequired","isSelected","propsIsSelected","name","onChange","theme","propsTheme","value","forwardedProps","_objectWithoutProperties","_excluded","useTheme","isFocusVisible","focusProps","useFocusRing","setSelected","useState","Boolean","includes","isControlled","undefined","useEffect","warnIfNoAccessibleLabelFound","console","warn","handleChange","useCallback","event","addValue","removeValue","React","createElement","StyledCheckbox","_extends","$isColored","$isDisabled","$isFocusVisible","$isInvalid","$isRequired","$isSelected","$theme","classNames","Icon","icon","mdiCheckboxMarked","mdiMinusBox","mdiCheckboxBlankOutline","checked","disabled","type","displayName"],"mappings":"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"}

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

@@ -0,0 +1,2 @@
+export { Checkbox } from './Checkbox2.js';
+//# sourceMappingURL=checkbox.js.map

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

@@ -0,0 +1,113 @@
+import styled, { css } from 'styled-components';
+import { baseStyling } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledCheckbox = styled.label`
+  height: fit-content;
+  position: relative;
+  width: fit-content;
+  ${baseStyling}
+
+  align-items: flex-start;
+  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-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-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;
+    padding-top: 2px;
+
+    [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-checkbox-fill-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid);
+          ` : css`
+            color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored)`};
+          `}
+
+      ${$isFocusVisible && !$isDisabled ? css`
+            background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
+          ` : ''}
+    `;
+}}
+  }
+
+  &: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-checkbox-fill-invalid-hover);
+                  ` : css`
+                    background-color: ${$isColored ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)` : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};
+                  `}
+              border-radius: 4px;
+            }
+          ` : '';
+}}
+  }
+`;
+
+export { StyledCheckbox };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/checkbox/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { StyledCheckboxProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCheckbox = styled.label<StyledCheckboxProps>`\n  height: fit-content;\n  position: relative;\n  width: fit-content;\n  ${baseStyling}\n\n  align-items: flex-start;\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-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-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    padding-top: 2px;\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-checkbox-fill-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-fill-invalid);\n          `\n        : css`\n            color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-checkbox-fill-default)`\n              : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored)`};\n          `}\n\n      ${$isFocusVisible && !$isDisabled\n        ? css`\n            background-color: ${$isColored\n              ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)`\n              : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};\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-checkbox-fill-invalid-hover);\n                  `\n                : css`\n                    background-color: ${$isColored\n                      ? `var(--redsift-color-${$theme}-components-checkbox-fill-default-hover)`\n                      : `var(--redsift-color-${$theme}-components-checkbox-fill-uncolored-hover)`};\n                  `}\n              border-radius: 4px;\n            }\n          `\n        : ''}\n  }\n`;\n"],"names":["StyledCheckbox","styled","label","baseStyling","_ref","$isDisabled","$isInvalid","$theme","css","_ref2","$isColored","$isFocusVisible","_ref3"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,cAAc,GAAGC,MAAM,CAACC,KAA2B,CAAA;AAChE;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;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,oCAAmC,GAChE,CAAA,oBAAA,EAAsBA,MAAO,CAAsC,oCAAA,CAAA,CAAA;AACpF,UAAY,CAAA,CAAA;AACZ;AACA,MAAA,EAAQI,eAAe,IAAI,CAACN,WAAW,GAC7BG,GAAI,CAAA;AACd,8BAAgCE,EAAAA,UAAU,GACzB,CAAsBH,oBAAAA,EAAAA,MAAO,0CAAyC,GACtE,CAAA,oBAAA,EAAsBA,MAAO,CAA4C,0CAAA,CAAA,CAAA;AAC1F,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,0CAAyC,GACtE,CAAA,oBAAA,EAAsBA,MAAO,CAA4C,0CAAA,CAAA,CAAA;AAClG,kBAAoB,CAAA,CAAA;AACpB;AACA;AACA,UAAA,CAAW,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACb;AACA;;;;"}

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

@@ -0,0 +1,101 @@
+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 { CheckboxGroupOrientation } from './types.js';
+import { CheckboxGroupContext } from './context.js';
+import { StyledCheckboxGroup } 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", "defaultValues", "description", "isDisabled", "isInvalid", "isReadOnly", "isRequired", "label", "onChange", "orientation", "theme", "value"];
+const COMPONENT_NAME = 'CheckboxGroup';
+const CLASSNAME = 'redsift-checkbox-group';
+
+/**
+ * The CheckboxGroup component.
+ * Can be used as controlled or uncontrolled.
+ */
+const CheckboxGroup = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      children,
+      className,
+      color = ColorPalette.primary,
+      defaultValues,
+      description,
+      isDisabled,
+      isInvalid,
+      isReadOnly,
+      isRequired,
+      label,
+      onChange,
+      orientation = CheckboxGroupOrientation.vertical,
+      theme: propsTheme,
+      value
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const theme = useTheme(propsTheme);
+  const [selectedValues, setValue] = useState(value || defaultValues || []);
+  useEffect(() => {
+    if (value) {
+      state.setValue(value);
+    }
+  }, [value]);
+  const state = {
+    value: selectedValues,
+    isDisabled: isDisabled || false,
+    isReadOnly: isReadOnly || false,
+    setValue(values) {
+      if (isReadOnly || isDisabled) {
+        return;
+      }
+      setValue(values);
+    },
+    addValue(value) {
+      if (!selectedValues.includes(value)) {
+        setValue(selectedValues.concat(value));
+        if (onChange) {
+          onChange(selectedValues.concat(value));
+        }
+      }
+    },
+    removeValue(value) {
+      if (selectedValues.includes(value)) {
+        setValue(selectedValues.filter(existingValue => existingValue !== value));
+        if (onChange) {
+          onChange(selectedValues.filter(existingValue => existingValue !== value));
+        }
+      }
+    }
+  };
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledCheckboxGroup, _extends({
+    color: color
+  }, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isInvalid: isInvalid || isRequired && selectedValues.length === 0,
+    $isReadOnly: isReadOnly,
+    $orientation: orientation,
+    $theme: theme,
+    "aria-disabled": isDisabled,
+    className: classNames(CheckboxGroup.className, className),
+    ref: ref,
+    role: "group"
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: `${CheckboxGroup.className}-label`
+  }, label, isRequired ? ' *' : null), /*#__PURE__*/React__default.createElement("div", {
+    className: `${CheckboxGroup.className}-boxes`
+  }, /*#__PURE__*/React__default.createElement(CheckboxGroupContext.Provider, {
+    value: state
+  }, children)), /*#__PURE__*/React__default.createElement("span", {
+    className: `${CheckboxGroup.className}-description`
+  }, description)));
+});
+CheckboxGroup.className = CLASSNAME;
+CheckboxGroup.displayName = COMPONENT_NAME;
+
+export { CheckboxGroup };
+//# sourceMappingURL=CheckboxGroup.js.map

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

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

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

@@ -0,0 +1,3 @@
+export { CheckboxGroupOrientation } from './types.js';
+export { CheckboxGroup } from './CheckboxGroup.js';
+//# sourceMappingURL=checkbox-group.js.map

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

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

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

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

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

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

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

@@ -0,0 +1,78 @@
+import styled, { css } from 'styled-components';
+import { CheckboxGroupOrientation } from './types.js';
+import { baseStyling } from '../../shared/_internal/styles.js';
+
+/**
+ * Component style.
+ */
+const StyledCheckboxGroup = styled.div`
+  ${baseStyling}
+
+  display: flex;
+  flex-direction: column;
+
+  ${_ref => {
+  let {
+    $orientation
+  } = _ref;
+  return $orientation === CheckboxGroupOrientation.vertical ? `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: column;
+    }
+  ` : `
+    div.redsift-checkbox-group-boxes {
+      display: flex;
+      flex-direction: row;
+      flex-wrap: wrap;
+    }
+  `;
+}}
+
+  span.redsift-checkbox-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-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
+}}
+  }
+
+  span.redsift-checkbox-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-checkbox-text-disabled);
+          ` : $isInvalid ? css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);
+          ` : css`
+            color: var(--redsift-color-${$theme}-components-checkbox-text-default);
+          `;
+}}
+  }
+`;
+
+export { StyledCheckboxGroup };
+//# sourceMappingURL=styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../../../../../src/components/checkbox-group/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { baseStyling } from '../shared';\nimport { CheckboxGroupOrientation, StyledCheckboxGroupProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledCheckboxGroup = styled.div<StyledCheckboxGroupProps>`\n  ${baseStyling}\n\n  display: flex;\n  flex-direction: column;\n\n  ${({ $orientation }) =>\n    $orientation === CheckboxGroupOrientation.vertical\n      ? `\n    div.redsift-checkbox-group-boxes {\n      display: flex;\n      flex-direction: column;\n    }\n  `\n      : `\n    div.redsift-checkbox-group-boxes {\n      display: flex;\n      flex-direction: row;\n      flex-wrap: wrap;\n    }\n  `}\n\n  span.redsift-checkbox-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-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n  }\n\n  span.redsift-checkbox-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-checkbox-text-disabled);\n          `\n        : $isInvalid\n        ? css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-invalid);\n          `\n        : css`\n            color: var(--redsift-color-${$theme}-components-checkbox-text-default);\n          `}\n  }\n`;\n"],"names":["StyledCheckboxGroup","styled","div","baseStyling","_ref","$orientation","CheckboxGroupOrientation","vertical","_ref2","$isDisabled","$isInvalid","$theme","css","_ref3"],"mappings":";;;;AAIA;AACA;AACA;AACaA,MAAAA,mBAAmB,GAAGC,MAAM,CAACC,GAA8B,CAAA;AACxE,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,wBAAwB,CAACC,QAAQ,GAC7C,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/checkbox-group/_internal/types.js

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