@a-little-world/little-world-design-system 2.10.0

package/dist/cjs/components/Popover/Popover.d.ts

@@ -0,0 +1,16 @@
+import * as RadixPopover from '@radix-ui/react-popover';
+import React from 'react';
+export declare enum PopoverSizes {
+    Small = "160px",
+    Medium = "240px",
+    Large = "360px"
+}
+type PopoverProps = {
+    asTooltip?: boolean;
+    children: React.ReactNode;
+    showCloseButton?: boolean;
+    trigger?: React.ReactNode;
+    width?: PopoverSizes;
+} & RadixPopover.PopoverProps & RadixPopover.PopoverContentProps;
+declare const Popover: React.FC<PopoverProps>;
+export default Popover;

package/dist/cjs/components/Popover/Popover.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PopoverSizes = void 0;
+const RadixPopover = __importStar(require("@radix-ui/react-popover"));
+const react_1 = __importDefault(require("react"));
+const Button_1 = __importStar(require("../Button/Button"));
+const Icon_1 = require("../Icon");
+const styles_1 = require("./styles");
+var PopoverSizes;
+(function (PopoverSizes) {
+    PopoverSizes["Small"] = "160px";
+    PopoverSizes["Medium"] = "240px";
+    PopoverSizes["Large"] = "360px";
+})(PopoverSizes || (exports.PopoverSizes = PopoverSizes = {}));
+const DEFAULT_SIDE_OFFSET = 4; //px
+const Popover = ({ asTooltip, defaultOpen, children, onFocusOutside, open, side, sideOffset = DEFAULT_SIDE_OFFSET, showCloseButton, trigger, width = PopoverSizes.Small, }) => (react_1.default.createElement(styles_1.PopoverRoot, { defaultOpen: defaultOpen, open: open },
+    trigger && react_1.default.createElement(RadixPopover.Trigger, { asChild: true }, trigger),
+    react_1.default.createElement(RadixPopover.Portal, null,
+        react_1.default.createElement(styles_1.StyledPopoverContent, { side: side, sideOffset: sideOffset, "$asTooltip": asTooltip, "$width": width, "$extraPaddingTop": Boolean(!asTooltip && showCloseButton), collisionPadding: DEFAULT_SIDE_OFFSET, onFocusOutside: onFocusOutside },
+            children,
+            showCloseButton && (react_1.default.createElement(styles_1.StyledPopoverClose, { asChild: true, "$asTooltip": asTooltip },
+                react_1.default.createElement(Button_1.default, { variation: Button_1.ButtonVariations.Icon },
+                    react_1.default.createElement(Icon_1.CloseIcon, { label: "popover close", width: 12, height: 12 })))),
+            react_1.default.createElement(styles_1.StyledPopoverArrow, { "$asTooltip": asTooltip })))));
+exports.default = Popover;

package/dist/cjs/components/Popover/styles.d.ts

@@ -0,0 +1,14 @@
+import { PopoverSizes } from './Popover';
+export declare const PopoverRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-popover").PopoverProps, never>> & string & Omit<import("react").FC<import("@radix-ui/react-popover").PopoverProps>, keyof import("react").Component<any, {}, any>>;
+export declare const POPOVER_CONTENT_CSS: import("styled-components").RuleSet<object>;
+export declare const StyledPopoverContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>, {
+    $asTooltip?: boolean;
+    $extraPaddingTop: boolean;
+    $width: PopoverSizes;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPopoverClose: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $asTooltip?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverCloseProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledPopoverArrow: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("@radix-ui/react-popover").PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>, {
+    $asTooltip?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-popover").PopoverArrowProps & import("react").RefAttributes<SVGSVGElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/components/Popover/styles.js

@@ -0,0 +1,116 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledPopoverArrow = exports.StyledPopoverClose = exports.StyledPopoverContent = exports.POPOVER_CONTENT_CSS = exports.PopoverRoot = void 0;
+const react_popover_1 = require("@radix-ui/react-popover");
+const styled_components_1 = __importStar(require("styled-components"));
+const animations_1 = require("../../utils/animations");
+exports.PopoverRoot = (0, styled_components_1.default)(react_popover_1.Root) ``;
+exports.POPOVER_CONTENT_CSS = (0, styled_components_1.css) `
+  border-radius: ${({ theme }) => theme.radius.small};
+  padding: ${({ theme }) => theme.spacing.small};
+  font-size: 16px;
+  line-height: 1.5;
+  box-shadow:
+    hsl(206 22% 7% / 35%) 0px 10px 38px -10px,
+    hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  user-select: none;
+  animation-duration: 400ms;
+  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
+  will-change: transform, opacity;
+  width: max-content;
+  max-width: 360px;
+
+  &[data-state='delayed-open'][data-side='top'] {
+    animation-name: ${animations_1.slideDownAndFade};
+  }
+  &[data-state='delayed-open'][data-side='right'] {
+    animation-name: ${animations_1.slideLeftAndFade};
+  }
+  &[data-state='delayed-open'][data-side='bottom'] {
+    animation-name: ${animations_1.slideUpAndFade};
+  }
+  &[data-state='delayed-open'][data-side='left'] {
+    animation-name: ${animations_1.slideRightAndFade};
+  }
+`;
+exports.StyledPopoverContent = (0, styled_components_1.default)(react_popover_1.PopoverContent) `
+  ${exports.POPOVER_CONTENT_CSS}
+
+  display: flex;
+  flex-direction: column;
+  z-index: 1000;
+
+  ${({ $width }) => $width &&
+    `
+      width: ${$width};
+    `}
+
+  ${({ $extraPaddingTop, theme }) => $extraPaddingTop &&
+    `
+    padding-top: ${theme.spacing.medium};
+  `}
+
+  ${({ $asTooltip, theme }) => (0, styled_components_1.css) `
+    background-color: ${$asTooltip
+    ? theme.color.surface.bold
+    : theme.color.surface.elevated};
+    color: ${$asTooltip ? theme.color.text.reversed : theme.color.text.primary};
+    padding-right: ${$asTooltip ? theme.spacing.medium : theme.spacing.small};
+  `}
+    
+
+  &[data-state='open'][data-side='top'] {
+    animation-name: ${animations_1.slideDownAndFade};
+  }
+  &[data-state='open'][data-side='right'] {
+    animation-name: ${animations_1.slideLeftAndFade};
+  }
+  &[data-state='open'][data-side='bottom'] {
+    animation-name: ${animations_1.slideUpAndFade};
+  }
+  &[data-state='open'][data-side='left'] {
+    animation-name: ${animations_1.slideRightAndFade};
+  }
+`;
+exports.StyledPopoverClose = (0, styled_components_1.default)(react_popover_1.PopoverClose) `
+  position: absolute;
+  top: ${({ theme }) => theme.spacing.xsmall};
+  right: ${({ theme }) => theme.spacing.xsmall};
+  color: ${({ $asTooltip, theme }) => $asTooltip ? theme.color.text.reversed : theme.color.text.primary};
+`;
+exports.StyledPopoverArrow = (0, styled_components_1.default)(react_popover_1.PopoverArrow) `
+  fill: ${({ $asTooltip, theme }) => $asTooltip ? theme.color.surface.bold : theme.color.surface.elevated};
+`;

package/dist/cjs/components/ProgressBar/ProgressBar.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+type ProgressBarProps = {
+    className: string;
+    max: number;
+    value: number;
+};
+declare const ProgressBar: React.FC<ProgressBarProps>;
+export default ProgressBar;

package/dist/cjs/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,85 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Progress = __importStar(require("@radix-ui/react-progress"));
+const react_1 = __importStar(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const ProgressRoot = (0, styled_components_1.default)(Progress.Root) `
+  position: relative;
+  overflow: hidden;
+  border-radius: 99999px;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  width: 300px;
+  height: 8px;
+
+  /* Fix overflow clipping in Safari */
+  /* https://gist.github.com/domske/b66047671c780a238b51c51ffde8d3a0 */
+  transform: translateZ(0);
+`;
+const ProgressIndicator = (0, styled_components_1.default)(Progress.Indicator) `
+  background-color: ${({ theme }) => theme.color.surface.indicator};
+  width: 100%;
+  height: 100%;
+  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
+`;
+const ProgressBarWrapper = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.small};
+  font-family: 'Work Sans';
+`;
+const calculateProgress = (max, value) => {
+    return (value / max) * 100;
+};
+const ProgressBar = ({ className, max, value = 0, }) => {
+    const [progress, setProgress] = (0, react_1.useState)(calculateProgress(max, value));
+    (0, react_1.useEffect)(() => {
+        setProgress(calculateProgress(max, value));
+    }, [max, value]);
+    return (react_1.default.createElement(ProgressBarWrapper, { className: className },
+        react_1.default.createElement(Text_1.default, { id: "progressBarIndicator", tag: "span", type: little_world_design_system_core_1.TextTypes.Body6 },
+            value,
+            "/",
+            max),
+        react_1.default.createElement(ProgressRoot, { "aria-labelledby": "progressBarIndicator", value: value, max: max },
+            react_1.default.createElement(ProgressIndicator, { className: "ProgressIndicator", style: { transform: `translateX(-${100 - progress}%)` } }))));
+};
+exports.default = ProgressBar;

package/dist/cjs/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,16 @@
+import * as RadixRadioGroup from '@radix-ui/react-radio-group';
+import React from 'react';
+import { RadioGroupBaseProps } from '@a-little-world/little-world-design-system-core';
+type Props = {
+    error?: string;
+    label?: string;
+    labelTooltip?: string;
+    items: Array<{
+        id: string;
+        label?: string;
+        value: string;
+    }>;
+    inputRef: React.RefObject<HTMLInputElement>;
+} & RadixRadioGroup.RadioGroupProps & RadioGroupBaseProps;
+declare const RadioGroup: React.FC<Props>;
+export default RadioGroup;

package/dist/cjs/components/RadioGroup/RadioGroup.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const InputError_1 = __importDefault(require("../InputError/InputError"));
+const Label_1 = __importDefault(require("../Label/Label"));
+const styles_1 = require("./styles");
+const RadioGroup = ({ error, items, label, labelTooltip, inputRef, type = little_world_design_system_core_1.RadioGroupVariations.Classic, value, ...rest }) => {
+    const isPill = type === little_world_design_system_core_1.RadioGroupVariations.Pill;
+    return (react_1.default.createElement(styles_1.RadioGroupWrapper, null,
+        label && (react_1.default.createElement(Label_1.default, { bold: true, htmlFor: label, tooltipText: labelTooltip }, label)),
+        isPill ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(styles_1.PillRoot, { ref: inputRef, value: value, name: label, ...rest }, items?.map(item => (react_1.default.createElement(styles_1.PillItem, { key: item.id, value: item.value, id: item.id, "$hasError": Boolean(error) }, item.label)))),
+            react_1.default.createElement(InputError_1.default, { visible: Boolean(error), textAlign: "left" }, error))) : (react_1.default.createElement(styles_1.RadioGroupRoot, { ref: inputRef, value: value, name: label, ...rest },
+            items?.map(item => (react_1.default.createElement(styles_1.ItemContainer, { key: item.id },
+                react_1.default.createElement(styles_1.RadioGroupItem, { value: item.value, id: item.id, "$hasError": Boolean(error) },
+                    react_1.default.createElement(styles_1.RadioGroupIndicator, null)),
+                item.label && (react_1.default.createElement(Label_1.default, { htmlFor: item.id, inline: true }, item.label))))),
+            react_1.default.createElement(InputError_1.default, { visible: Boolean(error) }, error)))));
+};
+exports.default = RadioGroup;

package/dist/cjs/components/RadioGroup/styles.d.ts

@@ -0,0 +1,12 @@
+import * as RadioGroup from '@radix-ui/react-radio-group';
+export declare const RadioGroupWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RadioGroupRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const PillRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const PillItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const RadioGroupItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupItemProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const ItemContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const RadioGroupIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<RadioGroup.RadioGroupIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<RadioGroup.RadioGroupIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/components/RadioGroup/styles.js

@@ -0,0 +1,126 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.RadioGroupIndicator = exports.ItemContainer = exports.RadioGroupItem = exports.PillItem = exports.PillRoot = exports.RadioGroupRoot = exports.RadioGroupWrapper = void 0;
+const RadioGroup = __importStar(require("@radix-ui/react-radio-group"));
+const styled_components_1 = __importStar(require("styled-components"));
+const ITEM_WIDTH = '13px';
+exports.RadioGroupWrapper = styled_components_1.default.div ``;
+exports.RadioGroupRoot = (0, styled_components_1.default)(RadioGroup.Root) `
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: flex-start;
+  width: 100%;
+`;
+exports.PillRoot = (0, styled_components_1.default)(RadioGroup.Root) `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  align-items: center;
+  width: 100%;
+  margin-bottom: ${({ theme }) => theme.spacing.xxxsmall};
+`;
+exports.PillItem = (0, styled_components_1.default)(RadioGroup.Item) `
+  all: unset;
+  font-family: 'Signika Negative';
+  font-weight: 600;
+  background: ${({ theme }) => theme.color.surface.primary};
+  border-radius: ${({ theme }) => theme.radius.small};
+  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.03);
+  border: 2px solid ${({ theme }) => theme.color.border.subtle};
+  padding: ${({ theme }) => `${theme.spacing.xxsmall} ${theme.spacing.xsmall}`};
+  min-width: 60px;
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: filter 0.2s ease-in-out;
+
+  ${({ theme }) => (0, styled_components_1.css) `
+    @media (min-width: ${theme.breakpoints.small}) {
+      padding: ${theme.spacing.xsmall} ${theme.spacing.small};
+      min-width: 80px;
+    }
+  `}
+
+  &[data-state='checked'] {
+    border-color: ${({ $hasError, theme }) => $hasError ? theme.color.border.error : theme.color.border.selected};
+  }
+
+  &:hover {
+    filter: brightness(0.97);
+    transition: filter 0.2s ease-in-out;
+  }
+`;
+exports.RadioGroupItem = (0, styled_components_1.default)(RadioGroup.Item) `
+  all: unset;
+  background: ${({ theme }) => theme.color.surface.primary};
+  box-sizing: border-box;
+  border: 1px solid ${({ theme }) => theme.color.surface.contrast};
+  width: ${ITEM_WIDTH};
+  height: ${ITEM_WIDTH};
+  border-radius: 100%;
+  margin-right: ${({ theme }) => theme.spacing.xxsmall};
+
+  &:focus {
+    box-shadow: 0 0 0 2px
+      ${({ $hasError, theme }) => $hasError ? theme.color.border.error : '#eeb612'};
+  }
+`;
+exports.ItemContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+`;
+exports.RadioGroupIndicator = (0, styled_components_1.default)(RadioGroup.Indicator) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 9px;
+    height: 9px;
+    border-radius: 50%;
+    background-color: ${({ theme }) => theme.color.text.primary};
+  }
+`;

package/dist/cjs/components/Separator/Separator.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+export interface SeparatorProps {
+    background?: string;
+    className?: string;
+    color?: string;
+    orientation?: 'horizontal' | 'vertical';
+    size?: 'small' | 'medium' | 'large';
+    spacing?: string;
+}
+declare const Separator: ({ background, className, orientation, spacing, }: SeparatorProps) => React.JSX.Element;
+export default Separator;

package/dist/cjs/components/Separator/Separator.js

@@ -0,0 +1,61 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const RadixSeparator = __importStar(require("@radix-ui/react-separator"));
+const react_1 = __importDefault(require("react"));
+const styled_components_1 = __importDefault(require("styled-components"));
+const StyledSeparator = (0, styled_components_1.default)(RadixSeparator.Root) `
+  margin: ${({ theme, $spacing }) => $spacing || theme.spacing.small} 0;
+  background: ${({ theme, $background }) => $background || theme.color.border.contrast};
+
+  &[data-orientation='vertical'] {
+    height: 100%;
+    width: 1px;
+    margin: 0 ${({ theme, $spacing }) => $spacing || theme.spacing.medium};
+  }
+
+  &[data-orientation='horizontal'] {
+    height: 1px;
+    width: 100%;
+    margin: ${({ theme, $spacing }) => $spacing || theme.spacing.medium} 0;
+  }
+`;
+const Separator = ({ background, className, orientation = 'horizontal', spacing, }) => {
+    return (react_1.default.createElement(StyledSeparator, { className: className, orientation: orientation, decorative: true, "$background": background, "$spacing": spacing }));
+};
+exports.default = Separator;

package/dist/cjs/components/Separator/styles.d.ts

@@ -0,0 +1,6 @@
+export declare const SliderWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SliderRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderTrackProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderRange: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderRangeProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SliderThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<import("@radix-ui/react-slider").SliderThumbProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const Steps: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/cjs/components/Separator/styles.js

@@ -0,0 +1,57 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Steps = exports.SliderThumb = exports.SliderRange = exports.SliderTrack = exports.SliderRoot = exports.SliderWrapper = void 0;
+const react_slider_1 = require("@radix-ui/react-slider");
+const styled_components_1 = __importDefault(require("styled-components"));
+exports.SliderWrapper = styled_components_1.default.div ``;
+exports.SliderRoot = (0, styled_components_1.default)(react_slider_1.Root) `
+  position: relative;
+  display: flex;
+  align-items: center;
+  user-select: none;
+  touch-action: none;
+  width: 100%:
+  max-width: 400px;
+  height: 20px;
+`;
+exports.SliderTrack = (0, styled_components_1.default)(react_slider_1.Track) `
+  position: relative;
+  background-color: ${props => props.theme.color.surface.secondary};
+  flex-grow: 1;
+  border-radius: 9999px;
+  height: 3px;
+`;
+exports.SliderRange = (0, styled_components_1.default)(react_slider_1.Range) `
+  position: absolute;
+  background-color: ${props => props.theme.color.surface.bold};
+  border-radius: 9999px;
+  height: 100%;
+`;
+exports.SliderThumb = (0, styled_components_1.default)(react_slider_1.Thumb) `
+  display: block;
+  width: ${({ theme }) => theme.spacing.small};
+  height: ${({ theme }) => theme.spacing.small};
+  background-color: ${({ theme }) => theme.color.surface.primary};
+  border-radius: 10px;
+  border: 1px solid ${props => props.theme.color.border.moderate};
+
+  &:hover {
+    background-color: ${props => props.theme.color.surface.primary};
+    cursor: grab;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0px 4px ${props => props.theme.color.surface.contrast};
+  }
+`;
+exports.Steps = styled_components_1.default.div `
+  width: 100%;
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: space-between;
+`;

package/dist/cjs/components/Slider/Slider.d.ts

@@ -0,0 +1,12 @@
+import * as RadixSlider from '@radix-ui/react-slider';
+import React from 'react';
+type SliderProps = {
+    ariaLabel: string;
+    error?: string;
+    label?: string;
+    labelTooltip?: string;
+    inputRef: React.RefObject<HTMLInputElement>;
+    steps: string[];
+} & RadixSlider.SliderProps;
+declare const Slider: ({ ariaLabel, defaultValue, inputRef, label, labelTooltip, onValueChange, value, steps, }: SliderProps) => React.JSX.Element;
+export default Slider;