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

package/dist/cjs/components/Slider/Slider.js

@@ -0,0 +1,17 @@
+"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 Label_1 = __importDefault(require("../Label/Label"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const styles_1 = require("./styles");
+const Slider = ({ ariaLabel, defaultValue, inputRef, label, labelTooltip, onValueChange, value, steps, }) => (react_1.default.createElement(styles_1.SliderWrapper, null,
+    label && (react_1.default.createElement(Label_1.default, { bold: true, htmlFor: label, tooltipText: labelTooltip }, label)),
+    react_1.default.createElement(styles_1.SliderRoot, { "aria-label": ariaLabel, ref: inputRef, defaultValue: defaultValue, max: steps.length - 1, onValueChange: onValueChange, value: value || defaultValue },
+        react_1.default.createElement(styles_1.SliderTrack, null,
+            react_1.default.createElement(styles_1.SliderRange, null)),
+        react_1.default.createElement(styles_1.SliderThumb, { "aria-label": ariaLabel })),
+    react_1.default.createElement(styles_1.Steps, null, steps.map(step => (react_1.default.createElement(Text_1.default, { key: step }, step))))));
+exports.default = Slider;

package/dist/cjs/components/Slider/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/Slider/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/StarRating/StarRating.d.ts

@@ -0,0 +1,22 @@
+import React from 'react';
+export declare enum StarRatingSizes {
+    Small = 24,// px
+    Medium = 32,
+    Large = 48
+}
+export interface StarRatingProps {
+    className?: string;
+    color?: string;
+    displayNumber?: boolean;
+    displayTextRatings?: boolean;
+    enableHalfRatings?: boolean;
+    id?: string;
+    initialRating?: number;
+    ratings?: string[];
+    maxRating?: number;
+    name?: string;
+    onChange?: (rating: number) => void;
+    size?: StarRatingSizes;
+}
+declare const StarRating: ({ className, color, displayNumber, displayTextRatings, enableHalfRatings, id, initialRating, name, maxRating, onChange, ratings, size, }: StarRatingProps) => React.JSX.Element;
+export default StarRating;

package/dist/cjs/components/StarRating/StarRating.js

@@ -0,0 +1,143 @@
+"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.StarRatingSizes = void 0;
+const react_1 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const Icon_1 = require("../Icon");
+const styles_1 = require("./styles");
+const roundToHalf = (value) => {
+    const rounded = Math.round(value * 2) / 2;
+    return Math.max(0, Math.min(rounded, 5));
+};
+const DEFAULT_RATINGS = ['Poor', 'Fair', 'Average', 'Good', 'Excellent'];
+var StarRatingSizes;
+(function (StarRatingSizes) {
+    StarRatingSizes[StarRatingSizes["Small"] = 24] = "Small";
+    StarRatingSizes[StarRatingSizes["Medium"] = 32] = "Medium";
+    StarRatingSizes[StarRatingSizes["Large"] = 48] = "Large";
+})(StarRatingSizes || (exports.StarRatingSizes = StarRatingSizes = {}));
+const StarRating = ({ className, color, displayNumber = false, displayTextRatings = false, enableHalfRatings = false, id = 'star-rating', initialRating = 0, name = 'rating', maxRating = 5, onChange, ratings = DEFAULT_RATINGS, size = StarRatingSizes.Small, }) => {
+    const [rating, setRating] = (0, react_1.useState)(initialRating);
+    const [hoverRating, setHoverRating] = (0, react_1.useState)(0);
+    const [focusedStar, setFocusedStar] = (0, react_1.useState)(null);
+    const theme = (0, styled_components_1.useTheme)();
+    const ratingIncrement = enableHalfRatings ? 0.5 : 1;
+    const handleMouseMove = (e, starIndex) => {
+        const { left, width } = e.currentTarget.getBoundingClientRect();
+        const percent = (e.clientX - left) / width;
+        const newRating = enableHalfRatings && percent <= 0.5 ? starIndex + 0.5 : starIndex + 1;
+        setHoverRating(roundToHalf(newRating));
+    };
+    const handleMouseLeave = () => {
+        setHoverRating(0);
+    };
+    const updateRating = (0, react_1.useCallback)((newRating) => {
+        const roundedRating = enableHalfRatings
+            ? roundToHalf(newRating)
+            : newRating;
+        setRating(roundedRating);
+        onChange?.(roundedRating);
+    }, [onChange]);
+    const calculateRating = (starNumber) => {
+        // Toggle between whole, half, and unrated for clicked star
+        let newRating;
+        if (rating === starNumber) {
+            newRating = starNumber - ratingIncrement;
+        }
+        else {
+            newRating = starNumber;
+        }
+        updateRating(newRating);
+    };
+    const handleKeyDown = (e, starIndex) => {
+        let newRating = rating;
+        setHoverRating(0);
+        switch (e.key) {
+            case 'ArrowLeft':
+                e.preventDefault();
+                // If we're at a whole number, go down by 0.5, otherwise go down by 1
+                newRating =
+                    Math.floor(rating) === rating
+                        ? Math.max(0, rating - ratingIncrement)
+                        : Math.max(0, Math.floor(rating));
+                updateRating(newRating);
+                setFocusedStar(Math.max(0, newRating - 1));
+                break;
+            case 'ArrowRight':
+                e.preventDefault();
+                // If we're at a whole number, go up by 0.5, otherwise go up by 1
+                newRating =
+                    Math.floor(rating) === rating
+                        ? Math.min(maxRating, rating + ratingIncrement)
+                        : Math.min(maxRating, Math.ceil(rating));
+                updateRating(newRating);
+                setFocusedStar(Math.min(maxRating - 1, newRating - 1));
+                break;
+            case ' ':
+            case 'Enter':
+                e.preventDefault();
+                calculateRating((focusedStar ?? starIndex) + 1);
+                break;
+            default:
+                break;
+        }
+    };
+    const currentRating = hoverRating || rating;
+    return (react_1.default.createElement(styles_1.RatingContainer, { className: className, role: "group", "aria-label": "Star rating" },
+        react_1.default.createElement(styles_1.VisuallyHidden, { id: `${id}-label` },
+            "Rating: ",
+            currentRating,
+            " out of ",
+            maxRating,
+            " stars"),
+        react_1.default.createElement(styles_1.Stars, null,
+            [...Array(maxRating)].map((_, index) => {
+                const fillAmount = Math.max(0, Math.min(1, currentRating - index));
+                const starNumber = index + 1;
+                const handleClick = () => {
+                    // tap devices cannot use hover rating
+                    const crossDeviceFillAmount = hoverRating ? fillAmount : 1;
+                    calculateRating(index + crossDeviceFillAmount);
+                };
+                return (react_1.default.createElement(styles_1.StarContainer, { key: index, onClick: handleClick, onMouseMove: e => handleMouseMove(e, index), onMouseLeave: handleMouseLeave, onKeyDown: e => handleKeyDown(e, index), onFocus: () => setFocusedStar(index), onBlur: () => setFocusedStar(null), tabIndex: 0, role: "radio", "aria-checked": rating >= starNumber, "aria-label": `${starNumber} star${starNumber === 1 ? '' : 's'}`, "aria-describedby": `${id}-label`, name: name, type: "button" },
+                    react_1.default.createElement(Icon_1.StarIcon, { label: "background star", width: size, height: size, color: theme.color.surface.disabled, "aria-hidden": "true" }),
+                    react_1.default.createElement(styles_1.StarOverlay, { "$fillAmount": fillAmount },
+                        react_1.default.createElement(Icon_1.StarIcon, { label: "filled star", width: size, height: size, color: color || theme.color.surface.selected, "aria-hidden": "true" }))));
+            }),
+            displayNumber && (react_1.default.createElement(styles_1.Rating, { "aria-hidden": "true", tag: "span" }, currentRating || 0))),
+        displayTextRatings && (react_1.default.createElement(styles_1.TextRating, null, ratings[Math.ceil(currentRating - 1)]))));
+};
+exports.default = StarRating;

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

@@ -0,0 +1,35 @@
+export declare const RatingContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Stars: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StarContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {
+    isFocused?: boolean;
+}>> & string;
+export declare const StarOverlay: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fillAmount: number;
+}>> & string;
+export declare const Rating: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, never>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const TextRating: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}, never>> & string & Omit<({ bold, center, children, color, className, disableParser, id, style, tag, type, }: import("@a-little-world/little-world-design-system-core").TextBaseProps & {
+    className?: string;
+    disableParser?: boolean;
+    id?: string;
+    style?: import("react").CSSProperties;
+    tag?: "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "li" | "label" | "span" | "strong" | "div";
+}) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;
+export declare const VisuallyHidden: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;

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

@@ -0,0 +1,104 @@
+"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.VisuallyHidden = exports.TextRating = exports.Rating = exports.StarOverlay = exports.StarContainer = exports.Stars = exports.RatingContainer = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Text_1 = __importDefault(require("../Text/Text"));
+exports.RatingContainer = styled_components_1.default.div `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;
+exports.Stars = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+exports.StarContainer = styled_components_1.default.button `
+  position: relative;
+  cursor: pointer;
+  background: none;
+  border: none;
+  outline: none;
+  border-radius: ${({ theme }) => theme.radius.xxxsmall};
+  f &:focus-visible {
+    box-shadow: 0 0 0 2px #4f46e5;
+  }
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+`;
+exports.StarOverlay = styled_components_1.default.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: hidden;
+  width: ${props => props.$fillAmount * 100}%;
+  pointer-events: none;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+
+  transition: width 0.3s ease-in-out;
+  &:hover {
+    transition: width 1s ease-in-out;
+  }
+
+  > svg {
+    transition: width 0.3s ease-in-out;
+    ${({ $fillAmount }) => !$fillAmount &&
+    (0, styled_components_1.css) `
+        transition: width 0.3s ease-in-out;
+        width: 0;
+      `}:
+  }
+`;
+exports.Rating = (0, styled_components_1.default)(Text_1.default) `
+  margin-left: ${({ theme }) => theme.spacing.xxsmall};
+  width: 24px;
+`;
+exports.TextRating = (0, styled_components_1.default)(Text_1.default) `
+  height: 16px;
+`;
+exports.VisuallyHidden = styled_components_1.default.span `
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+`;

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

@@ -0,0 +1,4 @@
+import React from 'react';
+import { StatusBaseProps } from '@a-little-world/little-world-design-system-core';
+declare const StatusMessage: ({ className, type, visible, children, withBorder, }: StatusBaseProps) => React.JSX.Element;
+export default StatusMessage;

package/dist/cjs/components/StatusMessage/StatusMessage.js

@@ -0,0 +1,112 @@
+"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 react_1 = __importDefault(require("react"));
+const styled_components_1 = __importStar(require("styled-components"));
+const little_world_design_system_core_1 = require("@a-little-world/little-world-design-system-core");
+const Text_1 = __importDefault(require("../Text/Text"));
+const Icon_1 = require("../Icon");
+const StatusMessageWrapper = styled_components_1.default.div `
+  display: flex;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  width: 100%;
+  min-height: ${({ theme }) => theme.spacing.xlarge};
+  padding: ${({ theme, $withBorder }) => $withBorder ? theme.spacing.small : theme.spacing.xxsmall};
+  opacity: ${({ $visible }) => ($visible ? 1 : 0)};
+  transition: ${({ $visible }) => ($visible ? 'opacity 1s' : 'none')};
+  text-align: ${({ $withIcon }) => ($withIcon ? 'left' : 'center')};
+  margin: ${({ theme, $withBorder }) => $withBorder ? 0 : theme.spacing.xxsmall}
+    0;
+  border-radius: ${({ theme, $withBorder }) => $withBorder ? theme.radius.xxsmall : 0};
+
+  ${({ $type, theme, $withBorder }) => {
+    if ($type === little_world_design_system_core_1.StatusTypes.Error)
+        return (0, styled_components_1.css) `
+        background: ${theme.color.surface.error};
+        color: ${theme.color.text.error};
+        border: ${$withBorder
+            ? `1px solid ${theme.color.border.error}`
+            : 'none'};
+      `;
+    if ($type === little_world_design_system_core_1.StatusTypes.Success)
+        return (0, styled_components_1.css) `
+        background: ${theme.color.surface.success};
+        color: ${theme.color.text.success};
+        border: ${$withBorder
+            ? `1px solid ${theme.color.border.success}`
+            : 'none'};
+      `;
+    if ($type === little_world_design_system_core_1.StatusTypes.Warning)
+        return (0, styled_components_1.css) `
+        background: ${theme.color.surface.warning};
+        color: ${theme.color.text.warning};
+        border: ${$withBorder
+            ? `1px solid ${theme.color.border.warning}`
+            : 'none'};
+      `;
+    // default is Info type
+    return (0, styled_components_1.css) `
+      background: ${theme.color.surface.subtle};
+      color: ${theme.color.text.info};
+      border: ${$withBorder ? `1px solid ${theme.color.border.info}` : 'none'};
+    `;
+}})
+`;
+const StyledIcon = styled_components_1.default.svg `
+  flex-shrink: 0;
+  margin-top: 3px;
+`;
+const STATUS_ICONS = {
+    [little_world_design_system_core_1.StatusTypes.Error]: {
+        Icon: Icon_1.ExclamationIcon,
+        label: 'error icon',
+    },
+    [little_world_design_system_core_1.StatusTypes.Warning]: {
+        Icon: Icon_1.ExclamationIcon,
+        label: 'warning icon',
+    },
+};
+const StatusMessage = ({ className, type, visible, children, withBorder, }) => {
+    const icon = STATUS_ICONS[type];
+    const Icon = withBorder && icon?.Icon;
+    return (react_1.default.createElement(StatusMessageWrapper, { className: className, "$type": type, "$visible": visible, "$withBorder": withBorder, "$withIcon": !!Icon },
+        Icon && (react_1.default.createElement(StyledIcon, { as: Icon, label: icon.label, width: 18, height: 18 })),
+        react_1.default.createElement(Text_1.default, null, children)));
+};
+exports.default = StatusMessage;

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

@@ -0,0 +1,15 @@
+import * as RadixSwitch from '@radix-ui/react-switch';
+import React from 'react';
+type Props = {
+    className?: string;
+    description?: string;
+    error?: string;
+    fullWidth?: boolean;
+    label?: string;
+    labelBold?: boolean;
+    labelInline?: boolean;
+    labelTooltip?: string;
+    inputRef: React.RefObject<HTMLButtonElement>;
+} & RadixSwitch.SwitchProps;
+declare const Switch: React.FC<Props>;
+export default Switch;

package/dist/cjs/components/Switch/Switch.js

@@ -0,0 +1,19 @@
+"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 InputError_1 = __importDefault(require("../InputError/InputError"));
+const Label_1 = __importDefault(require("../Label/Label"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const styles_1 = require("./styles");
+const Switch = ({ className, description, error, fullWidth, label, labelBold = true, labelInline, labelTooltip, inputRef, checked, onCheckedChange, value, ...rest }) => (react_1.default.createElement(styles_1.SwitchWrapper, { className: className, "$fullWidth": fullWidth, "$labelInline": labelInline, "$labelAndDescription": Boolean(label && description) },
+    (label || description) && (react_1.default.createElement(styles_1.LabelContainer, { "$inline": labelInline },
+        label && (react_1.default.createElement(Label_1.default, { bold: labelBold, htmlFor: label, tooltipText: labelTooltip, marginBottom: "0" }, label)),
+        description && react_1.default.createElement(Text_1.default, null, description))),
+    react_1.default.createElement(styles_1.SwitchContainer, null,
+        react_1.default.createElement(styles_1.SwitchRoot, { ref: inputRef, checked: checked, value: value, name: label, onCheckedChange: onCheckedChange, "$hasError": Boolean(error), ...rest },
+            react_1.default.createElement(styles_1.SwitchThumb, null)),
+        react_1.default.createElement(InputError_1.default, { visible: Boolean(error), textAlign: "left" }, error))));
+exports.default = Switch;

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

@@ -0,0 +1,14 @@
+import * as Switch from '@radix-ui/react-switch';
+export declare const SwitchWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $fullWidth?: boolean;
+    $labelInline?: boolean;
+    $labelAndDescription: boolean;
+}>> & string;
+export declare const LabelContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $inline?: boolean;
+}>> & string;
+export declare const SwitchRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Switch.SwitchProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Switch.SwitchProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SwitchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SwitchThumb: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Switch.SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Switch.SwitchThumbProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;