@traefik-labs/faency 12.0.7

package/dist/components/Select/Select.cjs

@@ -0,0 +1,239 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const reactIcons = require("@radix-ui/react-icons");
+const React = require("react");
+const stitches_config = require("../../stitches.config.cjs");
+const Elevation = require("../Elevation/Elevation.cjs");
+const FOCUS_SHADOW = Elevation.elevationVariants[1].boxShadow;
+const CARET_WIDTH = "15px";
+const StyledCaretSortIcon = stitches_config.styled(reactIcons.CaretSortIcon, {
+  position: "absolute",
+  pointerEvents: "none",
+  display: "inline",
+  variants: {
+    // Use margins instead of top/left to avoid setting "position: relative" on parent,
+    // which would make stacking context tricky with Select used in a control group.
+    size: {
+      small: {
+        marginTop: 5,
+        marginLeft: -16
+      },
+      medium: {
+        marginTop: 9,
+        marginLeft: -16
+      },
+      large: {
+        marginTop: 13,
+        marginLeft: -16
+      }
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "&:focus": {
+          cursor: "text"
+        }
+      },
+      text: {
+        cursor: "text"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+const StyledSelect = stitches_config.styled("select", {
+  appearance: "none",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "inherit",
+  color: "inherit",
+  font: "inherit",
+  outline: "none",
+  width: "100%",
+  height: "100%",
+  pl: "$1",
+  pr: "$3",
+  lineHeight: "25px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  "& option": {
+    color: "black",
+    bc: "white"
+  },
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px $colors$selectFocusBorder, ${FOCUS_SHADOW}`
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    color: "$selectDisabledText"
+  }
+});
+const SelectWrapper = stitches_config.styled("div", {
+  position: "relative",
+  backgroundColor: "$selectBg",
+  borderRadius: "$2",
+  boxShadow: "inset 0 0 0 1px $colors$selectBorder",
+  color: "$selectText",
+  fontFamily: "$rubik",
+  fontSize: "$1",
+  fontVariantNumeric: "tabular-nums",
+  fontWeight: "$regular",
+  height: "$5",
+  flexShrink: 0,
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    borderRadius: "inherit"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    borderRadius: "inherit"
+  },
+  "&:focus-visible": {
+    "&::before": {
+      backgroundColor: "$selectFocusBg"
+    },
+    "&::after": {
+      backgroundColor: "$primary",
+      opacity: 0.15
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      "&::before": {
+        backgroundColor: "$selectHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$primary",
+        opacity: 0.05
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.7,
+        color: "$selectDisabledText",
+        "@hover": {
+          "&:hover": {
+            "&::before": {
+              display: "none"
+            },
+            "&::after": {
+              display: "none"
+            }
+          }
+        }
+      }
+    },
+    size: {
+      small: {
+        borderRadius: "$2",
+        height: "$5",
+        fontSize: "$1",
+        lineHeight: "$sizes$5",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$1"
+        },
+        [`& ${StyledSelect}`]: {
+          pl: "$2",
+          pr: `calc($2 + ${CARET_WIDTH})`
+        },
+        [`& ${StyledCaretSortIcon}`]: {
+          right: "calc($2 / 2)"
+        }
+      },
+      medium: {
+        borderRadius: "$3",
+        height: "$6",
+        fontSize: "$3",
+        lineHeight: "$sizes$6",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$3"
+        },
+        [`& ${StyledSelect}`]: {
+          pl: "$3",
+          pr: `calc($3 + ${CARET_WIDTH})`
+        },
+        [`& ${StyledCaretSortIcon}`]: {
+          right: "calc($3 / 2)"
+        }
+      },
+      large: {
+        borderRadius: "$3",
+        height: "$7",
+        fontSize: "$3",
+        lineHeight: "$sizes$7",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$3"
+        },
+        [`& ${StyledSelect}`]: {
+          pl: "$3",
+          pr: `calc($3 + ${CARET_WIDTH})`
+        },
+        [`& ${StyledCaretSortIcon}`]: {
+          right: "calc($3 / 2)"
+        }
+      }
+    },
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$slateA7",
+            backgroundColor: "$selectHoverBg"
+          }
+        },
+        "&:focus-within": {
+          backgroundColor: "$loContrast",
+          boxShadow: "inset 0px 0px 0px 1px $colors$selectFocusBorder, 0px 0px 0px 1px $colors$selectFocusBorder"
+        }
+      }
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$selectInvalidBorder",
+        "&:focus-visible": {
+          boxShadow: `inset 0 0 0 2px $colors$selectInvalidBorder, ${FOCUS_SHADOW}`
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+const Select = React.forwardRef(
+  ({ css, size, state, variant, cursor, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      SelectWrapper,
+      {
+        css,
+        size,
+        state,
+        variant,
+        disabled: props.disabled,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(StyledSelect, { ref: forwardedRef, ...props }),
+          /* @__PURE__ */ jsxRuntime.jsx(StyledCaretSortIcon, { size, cursor })
+        ]
+      }
+    );
+  }
+);
+Select.toString = () => `.${SelectWrapper.className}`;
+exports.Select = Select;
+//# sourceMappingURL=Select.cjs.map

package/dist/components/Select/Select.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.cjs","sources":["../../../components/Select/Select.tsx"],"sourcesContent":["import { CaretSortIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\nconst CARET_WIDTH = '15px';\n\nconst StyledCaretSortIcon = styled(CaretSortIcon, {\n  position: 'absolute',\n  pointerEvents: 'none',\n  display: 'inline',\n\n  variants: {\n    // Use margins instead of top/left to avoid setting \"position: relative\" on parent,\n    // which would make stacking context tricky with Select used in a control group.\n    size: {\n      small: {\n        marginTop: 5,\n        marginLeft: -16,\n      },\n      medium: {\n        marginTop: 9,\n        marginLeft: -16,\n      },\n      large: {\n        marginTop: 13,\n        marginLeft: -16,\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '&:focus': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: 'none',\n  borderRadius: 'inherit',\n  color: 'inherit',\n  font: 'inherit',\n  outline: 'none',\n  width: '100%',\n  height: '100%',\n  pl: '$1',\n  pr: '$3',\n  lineHeight: '25px',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n\n  '& option': {\n    color: 'black',\n    bc: 'white',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$selectFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    color: '$selectDisabledText',\n  },\n});\n\nconst SelectWrapper = styled('div', {\n  position: 'relative',\n  backgroundColor: '$selectBg',\n  borderRadius: '$2',\n  boxShadow: 'inset 0 0 0 1px $colors$selectBorder',\n  color: '$selectText',\n  fontFamily: '$rubik',\n  fontSize: '$1',\n  fontVariantNumeric: 'tabular-nums',\n  fontWeight: '$regular',\n  height: '$5',\n  flexShrink: 0,\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n    borderRadius: 'inherit',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n    borderRadius: 'inherit',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$selectFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$selectHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$selectDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              display: 'none',\n            },\n            '&::after': {\n              display: 'none',\n            },\n          },\n        },\n      },\n    },\n    size: {\n      small: {\n        borderRadius: '$2',\n        height: '$5',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n        '&:-webkit-autofill::first-line': {\n          fontSize: '$1',\n        },\n        [`& ${StyledSelect}`]: {\n          pl: '$2',\n          pr: `calc($2 + ${CARET_WIDTH})`,\n        },\n        [`& ${StyledCaretSortIcon}`]: {\n          right: 'calc($2 / 2)',\n        },\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n        '&:-webkit-autofill::first-line': {\n          fontSize: '$3',\n        },\n        [`& ${StyledSelect}`]: {\n          pl: '$3',\n          pr: `calc($3 + ${CARET_WIDTH})`,\n        },\n        [`& ${StyledCaretSortIcon}`]: {\n          right: 'calc($3 / 2)',\n        },\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n        '&:-webkit-autofill::first-line': {\n          fontSize: '$3',\n        },\n        [`& ${StyledSelect}`]: {\n          pl: '$3',\n          pr: `calc($3 + ${CARET_WIDTH})`,\n        },\n        [`& ${StyledCaretSortIcon}`]: {\n          right: 'calc($3 / 2)',\n        },\n      },\n    },\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'inset 0 0 0 1px $colors$slateA7',\n            backgroundColor: '$selectHoverBg',\n          },\n        },\n        '&:focus-within': {\n          backgroundColor: '$loContrast',\n          boxShadow:\n            'inset 0px 0px 0px 1px $colors$selectFocusBorder, 0px 0px 0px 1px $colors$selectFocusBorder',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$selectInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$selectInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nexport type SelectVariants = VariantProps<typeof StyledSelect> &\n  VariantProps<typeof SelectWrapper> &\n  VariantProps<typeof StyledCaretSortIcon>;\n\nexport type SelectProps = Omit<React.ComponentProps<typeof StyledSelect>, 'size'> &\n  SelectVariants & { css?: CSS };\n\nexport const Select = React.forwardRef<React.ElementRef<typeof StyledSelect>, SelectProps>(\n  ({ css, size, state, variant, cursor, ...props }, forwardedRef) => {\n    return (\n      <SelectWrapper\n        css={css}\n        size={size}\n        state={state}\n        variant={variant}\n        disabled={props.disabled}\n      >\n        <StyledSelect ref={forwardedRef} {...props} />\n        <StyledCaretSortIcon size={size} cursor={cursor} />\n      </SelectWrapper>\n    );\n  }\n);\n\nSelect.toString = () => `.${SelectWrapper.className}`;\n"],"names":["elevationVariants","styled","CaretSortIcon","jsxs","jsx"],"mappings":";;;;;;;AAOA,MAAM,eAAeA,UAAAA,kBAAkB,CAAC,EAAE;AAC1C,MAAM,cAAc;AAEpB,MAAM,sBAAsBC,gBAAAA,OAAOC,0BAAe;AAAA,EAChD,UAAU;AAAA,EACV,eAAe;AAAA,EACf,SAAS;AAAA,EAET,UAAU;AAAA;AAAA;AAAA,IAGR,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,MAEd,QAAQ;AAAA,QACN,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,MAEd,OAAO;AAAA,QACL,WAAW;AAAA,QACX,YAAY;AAAA,MAAA;AAAA,IACd;AAAA,IAEF,QAAQ;AAAA,MACN,SAAS;AAAA,QACP,QAAQ;AAAA,QACR,WAAW;AAAA,UACT,QAAQ;AAAA,QAAA;AAAA,MACV;AAAA,MAEF,MAAM;AAAA,QACJ,QAAQ;AAAA,MAAA;AAAA,IACV;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AAED,MAAM,eAAeD,gBAAAA,OAAO,UAAU;AAAA,EACpC,YAAY;AAAA,EACZ,iBAAiB;AAAA,EACjB,QAAQ;AAAA,EACR,cAAc;AAAA,EACd,OAAO;AAAA,EACP,MAAM;AAAA,EACN,SAAS;AAAA,EACT,OAAO;AAAA,EACP,QAAQ;AAAA,EACR,IAAI;AAAA,EACJ,IAAI;AAAA,EACJ,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,cAAc;AAAA,EACd,YAAY;AAAA,EAEZ,YAAY;AAAA,IACV,OAAO;AAAA,IACP,IAAI;AAAA,EAAA;AAAA,EAGN,mBAAmB;AAAA,IACjB,WAAW,8CAA8C,YAAY;AAAA,EAAA;AAAA,EAGvE,cAAc;AAAA,IACZ,eAAe;AAAA,IACf,OAAO;AAAA,EAAA;AAEX,CAAC;AAED,MAAM,gBAAgBA,gBAAAA,OAAO,OAAO;AAAA,EAClC,UAAU;AAAA,EACV,iBAAiB;AAAA,EACjB,cAAc;AAAA,EACd,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,oBAAoB;AAAA,EACpB,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,YAAY;AAAA,EAEZ,aAAa;AAAA,IACX,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,eAAe;AAAA,IACf,cAAc;AAAA,EAAA;AAAA,EAEhB,YAAY;AAAA,IACV,WAAW;AAAA,IACX,SAAS;AAAA,IACT,UAAU;AAAA,IACV,OAAO;AAAA,IACP,eAAe;AAAA,IACf,cAAc;AAAA,EAAA;AAAA,EAGhB,mBAAmB;AAAA,IACjB,aAAa;AAAA,MACX,iBAAiB;AAAA,IAAA;AAAA,IAEnB,YAAY;AAAA,MACV,iBAAiB;AAAA,MACjB,SAAS;AAAA,IAAA;AAAA,EACX;AAAA,EAGF,UAAU;AAAA,IACR,WAAW;AAAA,MACT,aAAa;AAAA,QACX,iBAAiB;AAAA,MAAA;AAAA,MAEnB,YAAY;AAAA,QACV,iBAAiB;AAAA,QACjB,SAAS;AAAA,MAAA;AAAA,IACX;AAAA,EACF;AAAA,EAGF,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,QACJ,SAAS;AAAA,QACT,OAAO;AAAA,QACP,UAAU;AAAA,UACR,WAAW;AAAA,YACT,aAAa;AAAA,cACX,SAAS;AAAA,YAAA;AAAA,YAEX,YAAY;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,UACX;AAAA,QACF;AAAA,MACF;AAAA,IACF;AAAA,IAEF,MAAM;AAAA,MACJ,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,kCAAkC;AAAA,UAChC,UAAU;AAAA,QAAA;AAAA,QAEZ,CAAC,KAAK,YAAY,EAAE,GAAG;AAAA,UACrB,IAAI;AAAA,UACJ,IAAI,aAAa,WAAW;AAAA,QAAA;AAAA,QAE9B,CAAC,KAAK,mBAAmB,EAAE,GAAG;AAAA,UAC5B,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF,QAAQ;AAAA,QACN,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,kCAAkC;AAAA,UAChC,UAAU;AAAA,QAAA;AAAA,QAEZ,CAAC,KAAK,YAAY,EAAE,GAAG;AAAA,UACrB,IAAI;AAAA,UACJ,IAAI,aAAa,WAAW;AAAA,QAAA;AAAA,QAE9B,CAAC,KAAK,mBAAmB,EAAE,GAAG;AAAA,UAC5B,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,MAEF,OAAO;AAAA,QACL,cAAc;AAAA,QACd,QAAQ;AAAA,QACR,UAAU;AAAA,QACV,YAAY;AAAA,QACZ,kCAAkC;AAAA,UAChC,UAAU;AAAA,QAAA;AAAA,QAEZ,CAAC,KAAK,YAAY,EAAE,GAAG;AAAA,UACrB,IAAI;AAAA,UACJ,IAAI,aAAa,WAAW;AAAA,QAAA;AAAA,QAE9B,CAAC,KAAK,mBAAmB,EAAE,GAAG;AAAA,UAC5B,OAAO;AAAA,QAAA;AAAA,MACT;AAAA,IACF;AAAA,IAEF,SAAS;AAAA,MACP,OAAO;AAAA,QACL,WAAW;AAAA,QACX,iBAAiB;AAAA,QACjB,UAAU;AAAA,UACR,WAAW;AAAA,YACT,WAAW;AAAA,YACX,iBAAiB;AAAA,UAAA;AAAA,QACnB;AAAA,QAEF,kBAAkB;AAAA,UAChB,iBAAiB;AAAA,UACjB,WACE;AAAA,QAAA;AAAA,MACJ;AAAA,IACF;AAAA,IAEF,OAAO;AAAA,MACL,SAAS;AAAA,QACP,WAAW;AAAA,QACX,mBAAmB;AAAA,UACjB,WAAW,gDAAgD,YAAY;AAAA,QAAA;AAAA,MACzE;AAAA,IACF;AAAA,EACF;AAAA,EAEF,iBAAiB;AAAA,IACf,MAAM;AAAA,EAAA;AAEV,CAAC;AASM,MAAM,SAAS,MAAM;AAAA,EAC1B,CAAC,EAAE,KAAK,MAAM,OAAO,SAAS,QAAQ,GAAG,MAAA,GAAS,iBAAiB;AACjE,WACEE,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA,UAAU,MAAM;AAAA,QAEhB,UAAA;AAAA,UAAAC,2BAAAA,IAAC,cAAA,EAAa,KAAK,cAAe,GAAG,MAAA,CAAO;AAAA,UAC5CA,2BAAAA,IAAC,qBAAA,EAAoB,MAAY,OAAA,CAAgB;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGvD;AACF;AAEA,OAAO,WAAW,MAAM,IAAI,cAAc,SAAS;;"}

package/dist/components/Select/Select.js

@@ -0,0 +1,239 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { CaretSortIcon } from "@radix-ui/react-icons";
+import React from "react";
+import { styled } from "../../stitches.config.js";
+import { elevationVariants } from "../Elevation/Elevation.js";
+const FOCUS_SHADOW = elevationVariants[1].boxShadow;
+const CARET_WIDTH = "15px";
+const StyledCaretSortIcon = styled(CaretSortIcon, {
+  position: "absolute",
+  pointerEvents: "none",
+  display: "inline",
+  variants: {
+    // Use margins instead of top/left to avoid setting "position: relative" on parent,
+    // which would make stacking context tricky with Select used in a control group.
+    size: {
+      small: {
+        marginTop: 5,
+        marginLeft: -16
+      },
+      medium: {
+        marginTop: 9,
+        marginLeft: -16
+      },
+      large: {
+        marginTop: 13,
+        marginLeft: -16
+      }
+    },
+    cursor: {
+      default: {
+        cursor: "default",
+        "&:focus": {
+          cursor: "text"
+        }
+      },
+      text: {
+        cursor: "text"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+const StyledSelect = styled("select", {
+  appearance: "none",
+  backgroundColor: "transparent",
+  border: "none",
+  borderRadius: "inherit",
+  color: "inherit",
+  font: "inherit",
+  outline: "none",
+  width: "100%",
+  height: "100%",
+  pl: "$1",
+  pr: "$3",
+  lineHeight: "25px",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+  whiteSpace: "nowrap",
+  "& option": {
+    color: "black",
+    bc: "white"
+  },
+  "&:focus-visible": {
+    boxShadow: `inset 0 0 0 2px $colors$selectFocusBorder, ${FOCUS_SHADOW}`
+  },
+  "&:disabled": {
+    pointerEvents: "none",
+    color: "$selectDisabledText"
+  }
+});
+const SelectWrapper = styled("div", {
+  position: "relative",
+  backgroundColor: "$selectBg",
+  borderRadius: "$2",
+  boxShadow: "inset 0 0 0 1px $colors$selectBorder",
+  color: "$selectText",
+  fontFamily: "$rubik",
+  fontSize: "$1",
+  fontVariantNumeric: "tabular-nums",
+  fontWeight: "$regular",
+  height: "$5",
+  flexShrink: 0,
+  "&::before": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    borderRadius: "inherit"
+  },
+  "&::after": {
+    boxSizing: "border-box",
+    content: '""',
+    position: "absolute",
+    inset: 0,
+    pointerEvents: "none",
+    borderRadius: "inherit"
+  },
+  "&:focus-visible": {
+    "&::before": {
+      backgroundColor: "$selectFocusBg"
+    },
+    "&::after": {
+      backgroundColor: "$primary",
+      opacity: 0.15
+    }
+  },
+  "@hover": {
+    "&:hover": {
+      "&::before": {
+        backgroundColor: "$selectHoverBg"
+      },
+      "&::after": {
+        backgroundColor: "$primary",
+        opacity: 0.05
+      }
+    }
+  },
+  variants: {
+    disabled: {
+      true: {
+        opacity: 0.7,
+        color: "$selectDisabledText",
+        "@hover": {
+          "&:hover": {
+            "&::before": {
+              display: "none"
+            },
+            "&::after": {
+              display: "none"
+            }
+          }
+        }
+      }
+    },
+    size: {
+      small: {
+        borderRadius: "$2",
+        height: "$5",
+        fontSize: "$1",
+        lineHeight: "$sizes$5",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$1"
+        },
+        [`& ${StyledSelect}`]: {
+          pl: "$2",
+          pr: `calc($2 + ${CARET_WIDTH})`
+        },
+        [`& ${StyledCaretSortIcon}`]: {
+          right: "calc($2 / 2)"
+        }
+      },
+      medium: {
+        borderRadius: "$3",
+        height: "$6",
+        fontSize: "$3",
+        lineHeight: "$sizes$6",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$3"
+        },
+        [`& ${StyledSelect}`]: {
+          pl: "$3",
+          pr: `calc($3 + ${CARET_WIDTH})`
+        },
+        [`& ${StyledCaretSortIcon}`]: {
+          right: "calc($3 / 2)"
+        }
+      },
+      large: {
+        borderRadius: "$3",
+        height: "$7",
+        fontSize: "$3",
+        lineHeight: "$sizes$7",
+        "&:-webkit-autofill::first-line": {
+          fontSize: "$3"
+        },
+        [`& ${StyledSelect}`]: {
+          pl: "$3",
+          pr: `calc($3 + ${CARET_WIDTH})`
+        },
+        [`& ${StyledCaretSortIcon}`]: {
+          right: "calc($3 / 2)"
+        }
+      }
+    },
+    variant: {
+      ghost: {
+        boxShadow: "none",
+        backgroundColor: "transparent",
+        "@hover": {
+          "&:hover": {
+            boxShadow: "inset 0 0 0 1px $colors$slateA7",
+            backgroundColor: "$selectHoverBg"
+          }
+        },
+        "&:focus-within": {
+          backgroundColor: "$loContrast",
+          boxShadow: "inset 0px 0px 0px 1px $colors$selectFocusBorder, 0px 0px 0px 1px $colors$selectFocusBorder"
+        }
+      }
+    },
+    state: {
+      invalid: {
+        boxShadow: "inset 0 0 0 1px $colors$selectInvalidBorder",
+        "&:focus-visible": {
+          boxShadow: `inset 0 0 0 2px $colors$selectInvalidBorder, ${FOCUS_SHADOW}`
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium"
+  }
+});
+const Select = React.forwardRef(
+  ({ css, size, state, variant, cursor, ...props }, forwardedRef) => {
+    return /* @__PURE__ */ jsxs(
+      SelectWrapper,
+      {
+        css,
+        size,
+        state,
+        variant,
+        disabled: props.disabled,
+        children: [
+          /* @__PURE__ */ jsx(StyledSelect, { ref: forwardedRef, ...props }),
+          /* @__PURE__ */ jsx(StyledCaretSortIcon, { size, cursor })
+        ]
+      }
+    );
+  }
+);
+Select.toString = () => `.${SelectWrapper.className}`;
+export {
+  Select
+};
+//# sourceMappingURL=Select.js.map

package/dist/components/Select/Select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.js","sources":["../../../components/Select/Select.tsx"],"sourcesContent":["import { CaretSortIcon } from '@radix-ui/react-icons';\nimport React from 'react';\n\nimport { CSS, styled, VariantProps } from '../../stitches.config';\nimport { elevationVariants } from '../Elevation';\n\n// CONSTANTS\nconst FOCUS_SHADOW = elevationVariants[1].boxShadow; // apply elevation $1 when focus\nconst CARET_WIDTH = '15px';\n\nconst StyledCaretSortIcon = styled(CaretSortIcon, {\n  position: 'absolute',\n  pointerEvents: 'none',\n  display: 'inline',\n\n  variants: {\n    // Use margins instead of top/left to avoid setting \"position: relative\" on parent,\n    // which would make stacking context tricky with Select used in a control group.\n    size: {\n      small: {\n        marginTop: 5,\n        marginLeft: -16,\n      },\n      medium: {\n        marginTop: 9,\n        marginLeft: -16,\n      },\n      large: {\n        marginTop: 13,\n        marginLeft: -16,\n      },\n    },\n    cursor: {\n      default: {\n        cursor: 'default',\n        '&:focus': {\n          cursor: 'text',\n        },\n      },\n      text: {\n        cursor: 'text',\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nconst StyledSelect = styled('select', {\n  appearance: 'none',\n  backgroundColor: 'transparent',\n  border: 'none',\n  borderRadius: 'inherit',\n  color: 'inherit',\n  font: 'inherit',\n  outline: 'none',\n  width: '100%',\n  height: '100%',\n  pl: '$1',\n  pr: '$3',\n  lineHeight: '25px',\n  overflow: 'hidden',\n  textOverflow: 'ellipsis',\n  whiteSpace: 'nowrap',\n\n  '& option': {\n    color: 'black',\n    bc: 'white',\n  },\n\n  '&:focus-visible': {\n    boxShadow: `inset 0 0 0 2px $colors$selectFocusBorder, ${FOCUS_SHADOW}`,\n  },\n\n  '&:disabled': {\n    pointerEvents: 'none',\n    color: '$selectDisabledText',\n  },\n});\n\nconst SelectWrapper = styled('div', {\n  position: 'relative',\n  backgroundColor: '$selectBg',\n  borderRadius: '$2',\n  boxShadow: 'inset 0 0 0 1px $colors$selectBorder',\n  color: '$selectText',\n  fontFamily: '$rubik',\n  fontSize: '$1',\n  fontVariantNumeric: 'tabular-nums',\n  fontWeight: '$regular',\n  height: '$5',\n  flexShrink: 0,\n\n  '&::before': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n    borderRadius: 'inherit',\n  },\n  '&::after': {\n    boxSizing: 'border-box',\n    content: '\"\"',\n    position: 'absolute',\n    inset: 0,\n    pointerEvents: 'none',\n    borderRadius: 'inherit',\n  },\n\n  '&:focus-visible': {\n    '&::before': {\n      backgroundColor: '$selectFocusBg',\n    },\n    '&::after': {\n      backgroundColor: '$primary',\n      opacity: 0.15,\n    },\n  },\n\n  '@hover': {\n    '&:hover': {\n      '&::before': {\n        backgroundColor: '$selectHoverBg',\n      },\n      '&::after': {\n        backgroundColor: '$primary',\n        opacity: 0.05,\n      },\n    },\n  },\n\n  variants: {\n    disabled: {\n      true: {\n        opacity: 0.7,\n        color: '$selectDisabledText',\n        '@hover': {\n          '&:hover': {\n            '&::before': {\n              display: 'none',\n            },\n            '&::after': {\n              display: 'none',\n            },\n          },\n        },\n      },\n    },\n    size: {\n      small: {\n        borderRadius: '$2',\n        height: '$5',\n        fontSize: '$1',\n        lineHeight: '$sizes$5',\n        '&:-webkit-autofill::first-line': {\n          fontSize: '$1',\n        },\n        [`& ${StyledSelect}`]: {\n          pl: '$2',\n          pr: `calc($2 + ${CARET_WIDTH})`,\n        },\n        [`& ${StyledCaretSortIcon}`]: {\n          right: 'calc($2 / 2)',\n        },\n      },\n      medium: {\n        borderRadius: '$3',\n        height: '$6',\n        fontSize: '$3',\n        lineHeight: '$sizes$6',\n        '&:-webkit-autofill::first-line': {\n          fontSize: '$3',\n        },\n        [`& ${StyledSelect}`]: {\n          pl: '$3',\n          pr: `calc($3 + ${CARET_WIDTH})`,\n        },\n        [`& ${StyledCaretSortIcon}`]: {\n          right: 'calc($3 / 2)',\n        },\n      },\n      large: {\n        borderRadius: '$3',\n        height: '$7',\n        fontSize: '$3',\n        lineHeight: '$sizes$7',\n        '&:-webkit-autofill::first-line': {\n          fontSize: '$3',\n        },\n        [`& ${StyledSelect}`]: {\n          pl: '$3',\n          pr: `calc($3 + ${CARET_WIDTH})`,\n        },\n        [`& ${StyledCaretSortIcon}`]: {\n          right: 'calc($3 / 2)',\n        },\n      },\n    },\n    variant: {\n      ghost: {\n        boxShadow: 'none',\n        backgroundColor: 'transparent',\n        '@hover': {\n          '&:hover': {\n            boxShadow: 'inset 0 0 0 1px $colors$slateA7',\n            backgroundColor: '$selectHoverBg',\n          },\n        },\n        '&:focus-within': {\n          backgroundColor: '$loContrast',\n          boxShadow:\n            'inset 0px 0px 0px 1px $colors$selectFocusBorder, 0px 0px 0px 1px $colors$selectFocusBorder',\n        },\n      },\n    },\n    state: {\n      invalid: {\n        boxShadow: 'inset 0 0 0 1px $colors$selectInvalidBorder',\n        '&:focus-visible': {\n          boxShadow: `inset 0 0 0 2px $colors$selectInvalidBorder, ${FOCUS_SHADOW}`,\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    size: 'medium',\n  },\n});\n\nexport type SelectVariants = VariantProps<typeof StyledSelect> &\n  VariantProps<typeof SelectWrapper> &\n  VariantProps<typeof StyledCaretSortIcon>;\n\nexport type SelectProps = Omit<React.ComponentProps<typeof StyledSelect>, 'size'> &\n  SelectVariants & { css?: CSS };\n\nexport const Select = React.forwardRef<React.ElementRef<typeof StyledSelect>, SelectProps>(\n  ({ css, size, state, variant, cursor, ...props }, forwardedRef) => {\n    return (\n      <SelectWrapper\n        css={css}\n        size={size}\n        state={state}\n        variant={variant}\n        disabled={props.disabled}\n      >\n        <StyledSelect ref={forwardedRef} {...props} />\n        <StyledCaretSortIcon size={size} cursor={cursor} />\n      </SelectWrapper>\n    );\n  }\n);\n\nSelect.toString = () => `.${SelectWrapper.className}`;\n"],"names":[],"mappings":"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"}

package/dist/components/Select/Select.themes.cjs

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const Input_themes = require("../Input/Input.themes.cjs");
+exports.Theme = void 0;
+((Theme2) => {
+  const remapInputTheme = (inputLightOrDark) => ({
+    selectBg: inputLightOrDark.inputBg,
+    selectBorder: inputLightOrDark.inputBorder,
+    selectFocusBg: inputLightOrDark.inputFocusBg,
+    selectFocusBorder: inputLightOrDark.inputFocusBorder,
+    selectHoverBg: inputLightOrDark.inputHoverBg,
+    selectText: inputLightOrDark.inputText,
+    selectPlaceholder: inputLightOrDark.inputPlaceholder,
+    selectDisabledText: inputLightOrDark.inputDisabledText,
+    selectInvalidBorder: inputLightOrDark.inputInvalidBorder
+  });
+  Theme2.getLight = (primaryColor) => ({
+    ...remapInputTheme(Input_themes.Theme.getLight(primaryColor))
+  });
+  Theme2.getDark = (primaryColor) => ({
+    ...remapInputTheme(Input_themes.Theme.getDark(primaryColor))
+  });
+})(exports.Theme || (exports.Theme = {}));
+//# sourceMappingURL=Select.themes.cjs.map

package/dist/components/Select/Select.themes.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.themes.cjs","sources":["../../../components/Select/Select.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nimport { Theme as InputTheme } from '../Input/Input.themes';\n\nexport namespace Theme {\n  type Colors = {\n    selectBg: Property.Color;\n    selectBorder: Property.Color;\n    selectFocusBg: Property.Color;\n    selectFocusBorder: Property.Color;\n    selectHoverBg: Property.Color;\n    selectText: Property.Color;\n    selectPlaceholder: Property.Color;\n    selectDisabledText: Property.Color;\n    selectInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n  type FactoryMapper = (colors: InputTheme.Colors) => Colors;\n\n  const remapInputTheme: FactoryMapper = (inputLightOrDark) => ({\n    selectBg: inputLightOrDark.inputBg,\n    selectBorder: inputLightOrDark.inputBorder,\n    selectFocusBg: inputLightOrDark.inputFocusBg,\n    selectFocusBorder: inputLightOrDark.inputFocusBorder,\n    selectHoverBg: inputLightOrDark.inputHoverBg,\n    selectText: inputLightOrDark.inputText,\n    selectPlaceholder: inputLightOrDark.inputPlaceholder,\n    selectDisabledText: inputLightOrDark.inputDisabledText,\n    selectInvalidBorder: inputLightOrDark.inputInvalidBorder,\n  });\n\n  export const getLight: Factory = (primaryColor) => ({\n    ...remapInputTheme(InputTheme.getLight(primaryColor)),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    ...remapInputTheme(InputTheme.getDark(primaryColor)),\n  });\n}\n"],"names":["Theme","InputTheme"],"mappings":";;;AAKiBA,QAAAA,QAAAA;AAAAA,CAAV,CAAUA,WAAV;AAgBL,QAAM,kBAAiC,CAAC,sBAAsB;AAAA,IAC5D,UAAU,iBAAiB;AAAA,IAC3B,cAAc,iBAAiB;AAAA,IAC/B,eAAe,iBAAiB;AAAA,IAChC,mBAAmB,iBAAiB;AAAA,IACpC,eAAe,iBAAiB;AAAA,IAChC,YAAY,iBAAiB;AAAA,IAC7B,mBAAmB,iBAAiB;AAAA,IACpC,oBAAoB,iBAAiB;AAAA,IACrC,qBAAqB,iBAAiB;AAAA,EAAA;AAG3BA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,GAAG,gBAAgBC,aAAAA,MAAW,SAAS,YAAY,CAAC;AAAA,EAAA;AAGzCD,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,GAAG,gBAAgBC,aAAAA,MAAW,QAAQ,YAAY,CAAC;AAAA,EAAA;AACrD,GAlCeD,QAAAA,UAAAA,gBAAA,CAAA,EAAA;"}

package/dist/components/Select/Select.themes.js

@@ -0,0 +1,25 @@
+import { Theme as Theme$1 } from "../Input/Input.themes.js";
+var Theme;
+((Theme2) => {
+  const remapInputTheme = (inputLightOrDark) => ({
+    selectBg: inputLightOrDark.inputBg,
+    selectBorder: inputLightOrDark.inputBorder,
+    selectFocusBg: inputLightOrDark.inputFocusBg,
+    selectFocusBorder: inputLightOrDark.inputFocusBorder,
+    selectHoverBg: inputLightOrDark.inputHoverBg,
+    selectText: inputLightOrDark.inputText,
+    selectPlaceholder: inputLightOrDark.inputPlaceholder,
+    selectDisabledText: inputLightOrDark.inputDisabledText,
+    selectInvalidBorder: inputLightOrDark.inputInvalidBorder
+  });
+  Theme2.getLight = (primaryColor) => ({
+    ...remapInputTheme(Theme$1.getLight(primaryColor))
+  });
+  Theme2.getDark = (primaryColor) => ({
+    ...remapInputTheme(Theme$1.getDark(primaryColor))
+  });
+})(Theme || (Theme = {}));
+export {
+  Theme
+};
+//# sourceMappingURL=Select.themes.js.map

package/dist/components/Select/Select.themes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Select.themes.js","sources":["../../../components/Select/Select.themes.ts"],"sourcesContent":["import { Property } from '@stitches/react/types/css';\n\nimport { ColorInfo } from '../../utils/getPrimaryColorInfo';\nimport { Theme as InputTheme } from '../Input/Input.themes';\n\nexport namespace Theme {\n  type Colors = {\n    selectBg: Property.Color;\n    selectBorder: Property.Color;\n    selectFocusBg: Property.Color;\n    selectFocusBorder: Property.Color;\n    selectHoverBg: Property.Color;\n    selectText: Property.Color;\n    selectPlaceholder: Property.Color;\n    selectDisabledText: Property.Color;\n    selectInvalidBorder: Property.Color;\n  };\n\n  type Factory = (primaryColor: ColorInfo) => Colors;\n  type FactoryMapper = (colors: InputTheme.Colors) => Colors;\n\n  const remapInputTheme: FactoryMapper = (inputLightOrDark) => ({\n    selectBg: inputLightOrDark.inputBg,\n    selectBorder: inputLightOrDark.inputBorder,\n    selectFocusBg: inputLightOrDark.inputFocusBg,\n    selectFocusBorder: inputLightOrDark.inputFocusBorder,\n    selectHoverBg: inputLightOrDark.inputHoverBg,\n    selectText: inputLightOrDark.inputText,\n    selectPlaceholder: inputLightOrDark.inputPlaceholder,\n    selectDisabledText: inputLightOrDark.inputDisabledText,\n    selectInvalidBorder: inputLightOrDark.inputInvalidBorder,\n  });\n\n  export const getLight: Factory = (primaryColor) => ({\n    ...remapInputTheme(InputTheme.getLight(primaryColor)),\n  });\n\n  export const getDark: Factory = (primaryColor) => ({\n    ...remapInputTheme(InputTheme.getDark(primaryColor)),\n  });\n}\n"],"names":["Theme","InputTheme"],"mappings":";AAKO,IAAU;AAAA,CAAV,CAAUA,WAAV;AAgBL,QAAM,kBAAiC,CAAC,sBAAsB;AAAA,IAC5D,UAAU,iBAAiB;AAAA,IAC3B,cAAc,iBAAiB;AAAA,IAC/B,eAAe,iBAAiB;AAAA,IAChC,mBAAmB,iBAAiB;AAAA,IACpC,eAAe,iBAAiB;AAAA,IAChC,YAAY,iBAAiB;AAAA,IAC7B,mBAAmB,iBAAiB;AAAA,IACpC,oBAAoB,iBAAiB;AAAA,IACrC,qBAAqB,iBAAiB;AAAA,EAAA;AAG3BA,SAAA,WAAoB,CAAC,kBAAkB;AAAA,IAClD,GAAG,gBAAgBC,QAAW,SAAS,YAAY,CAAC;AAAA,EAAA;AAGzCD,SAAA,UAAmB,CAAC,kBAAkB;AAAA,IACjD,GAAG,gBAAgBC,QAAW,QAAQ,YAAY,CAAC;AAAA,EAAA;AACrD,GAlCe,UAAA,QAAA,CAAA,EAAA;"}