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

package/dist/cjs/components/Checkbox/Checkbox.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 });
+exports.CheckboxButton = void 0;
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../Icon");
+const InputError_1 = __importDefault(require("../InputError/InputError"));
+const styles_1 = require("./styles");
+const CheckboxButton = ({ checked, className, color, error, id, inputRef, label, onCheckedChange, value, ...rest }) => (react_1.default.createElement(styles_1.CheckboxButtonContainer, { className: className, ref: inputRef, id: id, checked: checked, onCheckedChange: onCheckedChange, value: value, "$hasError": Boolean(error), ...rest },
+    react_1.default.createElement(styles_1.NonInteractiveCheckbox, { "$color": color, checked: checked }, checked && react_1.default.createElement(Icon_1.CheckIcon, { label: "check icon", width: 10 })),
+    label && (react_1.default.createElement(styles_1.StyledLabel, { htmlFor: id, inline: true }, label))));
+exports.CheckboxButton = CheckboxButton;
+const Checkbox = ({ checked, className, color, error, required = true, id, inputRef, label, onCheckedChange, readOnly, value, ...rest }) => {
+    return (react_1.default.createElement(styles_1.CheckboxWrapper, { className: className },
+        react_1.default.createElement(styles_1.CheckboxContainer, null,
+            readOnly ? (react_1.default.createElement(styles_1.NonInteractiveCheckbox, { "$color": color, checked: checked }, checked && react_1.default.createElement(Icon_1.CheckIcon, { label: "check icon", width: 10 }))) : (react_1.default.createElement(styles_1.CheckboxRoot, { ref: inputRef, id: id, checked: checked, onCheckedChange: onCheckedChange, value: value, "$hasError": Boolean(error), "$color": color, ...rest },
+                react_1.default.createElement(styles_1.CheckboxIndicator, null,
+                    react_1.default.createElement(Icon_1.CheckIcon, { label: "check icon", width: 10 })))),
+            label && (react_1.default.createElement(styles_1.StyledLabel, { htmlFor: id, inline: true }, label))),
+        required && (react_1.default.createElement(InputError_1.default, { visible: Boolean(error), textAlign: "left" }, error))));
+};
+exports.default = Checkbox;

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

@@ -0,0 +1,27 @@
+import * as Checkbox from '@radix-ui/react-checkbox';
+export declare const CheckboxWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError?: boolean;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const CheckboxContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const CheckboxRoot: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError?: boolean;
+    $color?: string;
+    checked: Checkbox.CheckboxProps["checked"];
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Checkbox.CheckboxProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const NonInteractiveCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $color?: string;
+    checked: Checkbox.CheckboxProps["checked"];
+}>> & string;
+export declare const CheckboxIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Checkbox.CheckboxIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Checkbox.CheckboxIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const StyledLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("@radix-ui/react-label").LabelProps & {
+    bold?: boolean;
+    inline?: boolean;
+    marginBottom?: string | number;
+    tooltipText?: string;
+}, never>> & string & Omit<import("react").FC<import("@radix-ui/react-label").LabelProps & {
+    bold?: boolean;
+    inline?: boolean;
+    marginBottom?: string | number;
+    tooltipText?: string;
+}>, keyof import("react").Component<any, {}, any>>;

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

@@ -0,0 +1,108 @@
+"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.StyledLabel = exports.CheckboxIndicator = exports.NonInteractiveCheckbox = exports.CheckboxRoot = exports.CheckboxContainer = exports.CheckboxButtonContainer = exports.CheckboxWrapper = void 0;
+const Checkbox = __importStar(require("@radix-ui/react-checkbox"));
+const styled_components_1 = __importStar(require("styled-components"));
+const Label_1 = __importDefault(require("../Label/Label"));
+const ITEM_WIDTH = '16px';
+exports.CheckboxWrapper = styled_components_1.default.div ``;
+exports.CheckboxButtonContainer = (0, styled_components_1.default)(Checkbox.Root) `
+  cursor: pointer;
+  padding: ${({ theme }) => theme.spacing.xxsmall};
+  display: flex;
+  align-items: center;
+  border: 1px solid
+    ${({ theme, checked, $hasError }) => checked
+    ? $hasError
+        ? theme.color.border.error
+        : theme.color.border.selected
+    : theme.color.border.subtle};
+  border-radius: ${({ theme }) => theme.radius.xxsmall};
+  background: ${({ checked, $hasError, theme }) => checked
+    ? $hasError
+        ? theme.color.surface.error
+        : theme.color.surface.accent
+    : theme.color.surface.secondary};
+
+  label {
+    cursor: pointer;
+  }
+`;
+exports.CheckboxContainer = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  margin: ${({ theme }) => theme.spacing.xxxxsmall} 0;
+  cursor: pointer;
+`;
+const CHECKBOX_STYLES = (0, styled_components_1.css) `
+  all: unset;
+  cursor: pointer;
+  background: ${({ theme }) => theme.color.surface.primary};
+  box-sizing: border-box;
+  border: 1px solid ${({ theme }) => theme.color.border.contrast};
+  color: ${({ theme }) => theme.color.text.primary};
+  width: ${ITEM_WIDTH};
+  height: ${ITEM_WIDTH};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-color: ${({ $hasError, theme }) => $hasError ? theme.color.border.error : theme.color.border.contrast};
+
+  ${({ $color, checked, theme }) => $color &&
+    checked &&
+    (0, styled_components_1.css) `
+      background: ${$color};
+      border-color: ${$color};
+      color: ${theme.color.text.reversed};
+    `}
+`;
+exports.CheckboxRoot = (0, styled_components_1.default)(Checkbox.Root) `
+  ${CHECKBOX_STYLES}
+`;
+exports.NonInteractiveCheckbox = styled_components_1.default.div `
+  ${CHECKBOX_STYLES}
+`;
+exports.CheckboxIndicator = (0, styled_components_1.default)(Checkbox.Indicator) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+exports.StyledLabel = (0, styled_components_1.default)(Label_1.default) `
+  margin-left: ${({ theme }) => theme.spacing.xxsmall};
+`;

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

@@ -0,0 +1,22 @@
+import React from 'react';
+type SelectedType = {
+    [x: string]: string[];
+};
+type CheckboxGridProps = {
+    columnHeadings: string[];
+    rowHeadings: string[];
+    highlightCells: SelectedType;
+    checkboxesByColumn: {
+        name: string;
+        value: string;
+        key: string;
+    }[][];
+    onSelection: (selected: SelectedType) => void;
+    preSelected?: SelectedType;
+    legendText?: string;
+    error?: string;
+    name: string;
+    readOnly?: boolean;
+};
+declare const CheckboxGrid: React.FC<CheckboxGridProps>;
+export default CheckboxGrid;

package/dist/cjs/components/CheckboxGrid/CheckboxGrid.js

@@ -0,0 +1,73 @@
+"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 = __importStar(require("react"));
+const styled_components_1 = require("styled-components");
+const InputError_1 = __importDefault(require("../InputError/InputError"));
+const Text_1 = __importDefault(require("../Text/Text"));
+const styles_1 = require("./styles");
+const CheckboxGrid = ({ columnHeadings, error, highlightCells, legendText, rowHeadings, checkboxesByColumn, preSelected, onSelection, name, readOnly, }) => {
+    const theme = (0, styled_components_1.useTheme)();
+    const [selected, setSelected] = (0, react_1.useState)(preSelected || {});
+    const onSelect = ({ key, state, value, }) => {
+        const oldValues = selected[key] || [];
+        const newValues = state
+            ? [...oldValues, value]
+            : oldValues.filter(el => el !== value);
+        const newTotalSelection = { ...selected, [key]: newValues };
+        setSelected(newTotalSelection);
+        onSelection(newTotalSelection);
+    };
+    return (react_1.default.createElement(styles_1.CheckboxGridWrapper, null,
+        react_1.default.createElement(styles_1.Grid, { "$columns": columnHeadings.length, "$rows": rowHeadings.length, "$hasError": !!error },
+            react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(styles_1.ColumnHeading, { tag: "span", bold: true, index: 0 }, columnHeadings[0]),
+                rowHeadings.map((row, index) => (react_1.default.createElement(styles_1.RowHeading, { tag: "span", key: row, index: index }, row))),
+                react_1.default.createElement(styles_1.ScrollableWrapper, null,
+                    columnHeadings.slice(1).map((column, index) => (react_1.default.createElement(styles_1.ColumnHeading, { key: column, tag: "span", bold: true, index: index + 1 }, column))),
+                    checkboxesByColumn.map((column, columnIndex) => column.map(({ value, key }, rowIndex) => {
+                        return (react_1.default.createElement(styles_1.StyledCheckbox, { key: key + value + rowIndex, checked: selected[key]?.includes(value), name: name, onCheckedChange: state => onSelect({ value, key, state }), value: value, color: theme.color.surface.selected, "$row": rowIndex + 2, "$column": columnIndex + 2, "$highlight": !!highlightCells?.[key]?.includes(value), readOnly: readOnly }));
+                    }))))),
+        react_1.default.createElement(styles_1.BelowGrid, null,
+            legendText && highlightCells && (react_1.default.createElement(styles_1.Legend, null,
+                react_1.default.createElement(styles_1.Square, null),
+                react_1.default.createElement(Text_1.default, { tag: "span" }, "="),
+                react_1.default.createElement(Text_1.default, { tag: "span" }, legendText))),
+            react_1.default.createElement(InputError_1.default, { visible: Boolean(error) }, error))));
+};
+exports.default = CheckboxGrid;

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

@@ -0,0 +1,64 @@
+export declare const CheckboxGridWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Grid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $columns: number;
+    $rows: number;
+    $hasError: boolean;
+}>> & string;
+export declare const ColumnHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<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";
+}, {
+    index: number;
+}>> & 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 RowHeading: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<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";
+}, {
+    index: number;
+}>> & 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 ScrollableWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const StyledCheckbox: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<{
+    className?: string;
+    color?: string;
+    error?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+} & import("@radix-ui/react-checkbox").CheckboxProps, {
+    checked: boolean;
+    $row: number;
+    $column: number;
+    $highlight: boolean;
+}>> & string & Omit<import("react").FC<{
+    className?: string;
+    color?: string;
+    error?: string;
+    id?: string;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+    label?: string;
+    readOnly?: boolean;
+    required?: boolean;
+} & import("@radix-ui/react-checkbox").CheckboxProps>, keyof import("react").Component<any, {}, any>>;
+export declare const BelowGrid: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Legend: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const Square: 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/CheckboxGrid/styles.js

@@ -0,0 +1,137 @@
+"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.Square = exports.Legend = exports.BelowGrid = exports.StyledCheckbox = exports.ScrollableWrapper = exports.RowHeading = exports.ColumnHeading = exports.Grid = exports.CheckboxGridWrapper = void 0;
+const styled_components_1 = __importStar(require("styled-components"));
+const Checkbox_1 = __importDefault(require("../Checkbox/Checkbox"));
+const Text_1 = __importDefault(require("../Text/Text"));
+exports.CheckboxGridWrapper = styled_components_1.default.div `
+  width: 100%;
+`;
+exports.Grid = styled_components_1.default.div `
+  display: grid;
+  width: 100%;
+  row-gap: ${({ theme }) => theme.spacing.xsmall};
+  column-gap: ${({ theme }) => theme.spacing.xxsmall};
+  grid-template-columns: ${({ $columns }) => `repeat(${$columns}, minmax(max-content, 1fr))`};
+  grid-template-rows: ${({ $rows }) => `repeat(${$rows}, 1fr)`};
+  grid-auto-rows: 27.5px;
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  padding-bottom: ${({ theme }) => theme.spacing.xxsmall};
+  overflow-x: scroll;
+  background: ${({ theme }) => theme.color.surface.primary};
+  color: ${({ theme }) => theme.color.text.primary};
+  align-items: center;
+  border-bottom: 1px solid
+    ${({ $hasError, theme }) => $hasError ? theme.color.border.error : theme.color.surface.primary};
+`;
+exports.ColumnHeading = (0, styled_components_1.default)(Text_1.default) `
+  grid-column-start: ${({ index }) => index + 1};
+  grid-column-end: ${({ index }) => index + 1};
+  grid-row-start: 1;
+  grid-row-end: 1;
+  text-align: center;
+  max-width: 100%;
+  padding: ${({ theme }) => theme.spacing.xxxsmall};
+  background: ${({ theme }) => theme.color.surface.primary};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${({ index }) => !index &&
+    `
+    position: sticky;
+    left: 0;
+  `}
+`;
+exports.RowHeading = (0, styled_components_1.default)(Text_1.default) `
+  grid-column-start: 1;
+  grid-column-end: 1;
+  grid-row-start: ${({ index }) => index + 2};
+  grid-row-end: ${({ index }) => index + 2};
+  text-align: center;
+  position: sticky;
+  left: 0;
+  background: ${({ theme }) => theme.color.surface.primary};
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+exports.ScrollableWrapper = styled_components_1.default.div `
+  overflow: scroll-x;
+  width: 100%;
+  display: contents;
+`;
+exports.StyledCheckbox = (0, styled_components_1.default)(Checkbox_1.default) `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  grid-row-start: ${({ $row }) => $row};
+  grid-column-start: ${({ $column }) => $column};
+  height: 100%;
+
+  ${({ checked, theme }) => checked &&
+    (0, styled_components_1.css) `
+      border-color: ${theme.color.border.selected};
+    `};
+
+  ${({ $highlight, theme }) => $highlight &&
+    (0, styled_components_1.css) `
+      background: ${theme.color.surface.accent};
+    `};
+`;
+exports.BelowGrid = styled_components_1.default.div `
+  display: flex;
+  justify-content: space-between;
+`;
+exports.Legend = styled_components_1.default.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+`;
+exports.Square = styled_components_1.default.div `
+  ${({ theme }) => (0, styled_components_1.css) `
+    width: 20px;
+    height: 16px;
+    background: ${theme.color.surface.accent};
+    border: 1px solid ${theme.color.border.contrast};
+  `};
+`;

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

@@ -0,0 +1,25 @@
+import React from 'react';
+import { InputHeight } from '../TextInput/TextInput';
+type Options = {
+    value: string;
+    label: string;
+}[];
+export type DropdownProps = {
+    ariaLabel?: string;
+    cannotError?: boolean;
+    error?: string;
+    height?: InputHeight;
+    label?: string;
+    labelTooltip?: string;
+    lockedValue?: string;
+    maxWidth?: string;
+    options: Options;
+    onValueChange: (value: string) => void;
+    placeholder: string;
+    value?: string;
+    disabled?: boolean;
+    required?: boolean;
+    inputRef?: React.RefObject<HTMLButtonElement>;
+};
+declare const Dropdown: React.FC<DropdownProps>;
+export default Dropdown;

package/dist/cjs/components/Dropdown/Dropdown.js

@@ -0,0 +1,70 @@
+"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 Select = __importStar(require("@radix-ui/react-select"));
+const react_1 = __importDefault(require("react"));
+const Icon_1 = require("../Icon");
+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 ARROW_DOWN_WIDTH = 13;
+const ARROW_DOWN_HEIGHT = 8;
+const isValidValue = (value, options) => options.some(option => option.value === value);
+const Option = ({ children, value, }) => {
+    return (react_1.default.createElement(styles_1.SelectItem, { value: value },
+        react_1.default.createElement(Select.SelectItemText, null,
+            react_1.default.createElement(Text_1.default, null, children)),
+        react_1.default.createElement(styles_1.SelectItemIndicator, null,
+            react_1.default.createElement(Icon_1.CheckIcon, { label: "selected item", width: "10px" }))));
+};
+const Dropdown = ({ ariaLabel, error, cannotError, disabled, height, inputRef, label, labelTooltip, lockedValue, maxWidth, onValueChange, options, placeholder, required, value, }) => {
+    const defaultValue = lockedValue || (value && isValidValue(value, options) ? value : undefined);
+    const canError = !lockedValue && !cannotError;
+    return (react_1.default.createElement(styles_1.DropdownWrapper, { "$maxWidth": maxWidth },
+        label && (react_1.default.createElement(Label_1.default, { bold: true, htmlFor: ariaLabel, tooltipText: labelTooltip }, label)),
+        react_1.default.createElement(Select.Root, { disabled: disabled || !!lockedValue, onValueChange: onValueChange, required: required, defaultValue: defaultValue },
+            react_1.default.createElement(styles_1.SelectTrigger, { "aria-label": ariaLabel || label, ref: inputRef, "$hasError": Boolean(error), "$height": height },
+                react_1.default.createElement(styles_1.SelectValue, { placeholder: placeholder }),
+                !lockedValue && (react_1.default.createElement(styles_1.SelectIcon, null,
+                    react_1.default.createElement(Icon_1.ChevronDownIcon, { width: ARROW_DOWN_WIDTH, height: ARROW_DOWN_HEIGHT, label: "dropdown icon" })))),
+            react_1.default.createElement(styles_1.SelectContent, { position: "popper" },
+                react_1.default.createElement(styles_1.SelectViewport, null, options.map(option => (react_1.default.createElement(Option, { key: option.label, value: option.value }, option.label)))))),
+        canError && react_1.default.createElement(InputError_1.default, { visible: Boolean(error) }, error)));
+};
+exports.default = Dropdown;

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

@@ -0,0 +1,15 @@
+import * as Select from '@radix-ui/react-select';
+export declare const DROPDOWN_MAX_WIDTH = "300px";
+export declare const DropdownWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $maxWidth?: string;
+}>> & string;
+export declare const SelectTrigger: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<Select.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>, {
+    $hasError: boolean;
+    $height?: string;
+}>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectTriggerProps & import("react").RefAttributes<HTMLButtonElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectValueProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectContent: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectContentProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectContentProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectViewport: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectViewportProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectIconProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectIconProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectItemProps & import("react").RefAttributes<HTMLDivElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectItemProps & import("react").RefAttributes<HTMLDivElement>>, keyof import("react").Component<any, {}, any>>;
+export declare const SelectItemIndicator: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Select.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>, never>> & string & Omit<import("react").ForwardRefExoticComponent<Select.SelectItemIndicatorProps & import("react").RefAttributes<HTMLSpanElement>>, keyof import("react").Component<any, {}, any>>;