@selfdecode/sd-component-library 4.0.73-vite24 → 4.0.73-vite25

package/lib/sd-component-library207.js

@@ -1,68 +1,22 @@
-import { j as r } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { useHover as k } from "./sd-component-library4.js";
-import { isTouchScreen as S } from "./sd-component-library5.js";
-import { FlexItemsCenter as j, FlexCenter as v } from "./sd-component-library38.js";
-import { Box as n } from "./sd-component-library197.js";
-const z = "10px", e = "20px", B = "5px", F = ({
-  disabled: o,
-  containerSx: x,
-  showHoverCheckbox: c,
-  bg: s,
-  showBGColorWhenIdle: l,
-  disabledColor: p = "cl_grey",
-  color: d = "cl_blue",
-  children: h,
-  showInnerBox: m,
-  onClick: a,
-  borderWidth: u = "2px",
-  innerBoxSx: C
-}) => {
-  const { isHover: b, hoverCallbacks: f } = k(), i = b || !c || S(), t = o ? p : d;
-  return /* @__PURE__ */ r.jsxs(
-    j,
-    {
-      onClick: o ? void 0 : a,
-      sx: {
-        cursor: o ? "default" : "pointer",
-        gap: "10px",
-        ...x
-      },
-      ...f,
-      children: [
-        /* @__PURE__ */ r.jsx(n, { size: e, sx: { flexShrink: 0 }, children: /* @__PURE__ */ r.jsx(
-          v,
-          {
-            width: i ? e : B,
-            height: e,
-            bg: l && i ? "" : s,
-            sx: {
-              flexShrink: 0,
-              borderRadius: "3px",
-              borderWidth: u,
-              borderColor: t,
-              borderStyle: "solid",
-              transition: "width 0.1s ease-in"
-            },
-            children: m && /* @__PURE__ */ r.jsx(
-              n,
-              {
-                sx: {
-                  border: `calc(${z} / 2) solid`,
-                  borderColor: t,
-                  borderRadius: "2px",
-                  ...C
-                }
-              }
-            )
-          }
-        ) }),
-        h
-      ]
-    }
-  );
-};
+import { j as i } from "./sd-component-library195.js";
+import "./sd-component-library198.js";
+import { Box as s } from "./sd-component-library199.js";
+const p = ({
+  color: r = "cl_lightGrey",
+  sx: t,
+  ...o
+}) => /* @__PURE__ */ i.jsx(
+  s,
+  {
+    sx: {
+      bg: r,
+      ...o,
+      ...t
+    },
+    "data-test": "divider"
+  }
+);
 export {
-  F as CheckboxV2Container
+  p as Divider
 };
 //# sourceMappingURL=sd-component-library207.js.map

package/lib/sd-component-library207.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library207.js","sources":["../src/components/checkboxes/checkbox-v2/partials/checkbox-v2-container/checkbox-v2-container.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { useHover } from \"../../../../../core/custom-hooks\";\nimport { isTouchScreen } from \"../../../../../core/functions\";\nimport { FlexCenter, FlexItemsCenter } from \"../../../../containers\";\nimport { CheckboxV2ContainerProps as Props } from \"./interfaces\";\n\nconst innerBoxSize = \"10px\";\nconst outerBoxSize = \"20px\";\n\nconst shrankSize = \"5px\";\n\nexport const CheckboxV2Container: React.FC<Props> = ({\n  disabled,\n  containerSx,\n  showHoverCheckbox,\n  bg,\n  showBGColorWhenIdle,\n  disabledColor = \"cl_grey\",\n  color = \"cl_blue\",\n  children,\n  showInnerBox,\n  onClick,\n  borderWidth = \"2px\",\n  innerBoxSx,\n}) => {\n  const { isHover, hoverCallbacks } = useHover();\n  const isCheckboxExtended = isHover || !showHoverCheckbox || isTouchScreen();\n  const currentColor = disabled ? disabledColor : color;\n\n  return (\n    <FlexItemsCenter\n      onClick={disabled ? undefined : onClick}\n      sx={{\n        cursor: disabled ? \"default\" : \"pointer\",\n        gap: \"10px\",\n        ...containerSx,\n      }}\n      {...hoverCallbacks}\n    >\n      <Box size={outerBoxSize} sx={{ flexShrink: 0 }}>\n        <FlexCenter\n          width={isCheckboxExtended ? outerBoxSize : shrankSize}\n          height={outerBoxSize}\n          bg={showBGColorWhenIdle ? (isCheckboxExtended ? \"\" : bg) : bg}\n          sx={{\n            flexShrink: 0,\n            borderRadius: \"3px\",\n            borderWidth,\n            borderColor: currentColor,\n            borderStyle: \"solid\",\n            transition: \"width 0.1s ease-in\",\n          }}\n        >\n          {showInnerBox && (\n            <Box\n              sx={{\n                border: `calc(${innerBoxSize} / 2) solid`,\n                borderColor: currentColor,\n                borderRadius: \"2px\",\n                ...innerBoxSx,\n              }}\n            />\n          )}\n        </FlexCenter>\n      </Box>\n\n      {children}\n    </FlexItemsCenter>\n  );\n};\n"],"names":["innerBoxSize","outerBoxSize","shrankSize","CheckboxV2Container","disabled","containerSx","showHoverCheckbox","bg","showBGColorWhenIdle","disabledColor","color","children","showInnerBox","onClick","borderWidth","innerBoxSx","isHover","hoverCallbacks","useHover","isCheckboxExtended","isTouchScreen","currentColor","jsxs","FlexItemsCenter","jsx","Box","FlexCenter"],"mappings":";;;;;;AASA,MAAMA,IAAe,QACfC,IAAe,QAEfC,IAAa,OAENC,IAAuC,CAAC;AAAA,EACnD,UAAAC;AAAA,EACA,aAAAC;AAAA,EACA,mBAAAC;AAAA,EACA,IAAAC;AAAA,EACA,qBAAAC;AAAA,EACA,eAAAC,IAAgB;AAAA,EAChB,OAAAC,IAAQ;AAAA,EACR,UAAAC;AAAA,EACA,cAAAC;AAAA,EACA,SAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,YAAAC;AACF,MAAM;AACJ,QAAM,EAAE,SAAAC,GAAS,gBAAAC,EAAe,IAAIC,EAAS,GACvCC,IAAqBH,KAAW,CAACV,KAAqBc,EAAc,GACpEC,IAAejB,IAAWK,IAAgBC;AAG9C,SAAAY,gBAAAA,EAAA;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,SAASnB,IAAW,SAAYS;AAAA,MAChC,IAAI;AAAA,QACF,QAAQT,IAAW,YAAY;AAAA,QAC/B,KAAK;AAAA,QACL,GAAGC;AAAA,MACL;AAAA,MACC,GAAGY;AAAA,MAEJ,UAAA;AAAA,QAAAO,gBAAAA,MAACC,KAAI,MAAMxB,GAAc,IAAI,EAAE,YAAY,KACzC,UAAAuB,gBAAAA,EAAA;AAAA,UAACE;AAAA,UAAA;AAAA,YACC,OAAOP,IAAqBlB,IAAeC;AAAA,YAC3C,QAAQD;AAAA,YACR,IAAIO,KAAuBW,IAAqB,KAAWZ;AAAA,YAC3D,IAAI;AAAA,cACF,YAAY;AAAA,cACZ,cAAc;AAAA,cACd,aAAAO;AAAA,cACA,aAAaO;AAAA,cACb,aAAa;AAAA,cACb,YAAY;AAAA,YACd;AAAA,YAEC,UACCT,KAAAY,gBAAAA,EAAA;AAAA,cAACC;AAAAA,cAAA;AAAA,gBACC,IAAI;AAAA,kBACF,QAAQ,QAAQzB,CAAY;AAAA,kBAC5B,aAAaqB;AAAA,kBACb,cAAc;AAAA,kBACd,GAAGN;AAAA,gBACL;AAAA,cAAA;AAAA,YACF;AAAA,UAAA;AAAA,QAAA,GAGN;AAAA,QAECJ;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"sd-component-library207.js","sources":["../src/components/dividers/divider/divider.tsx"],"sourcesContent":["import React from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { DividerProps as Props } from \"./interfaces\";\n\n/**\n * Base divider component. Other divider components should be built from this.\n */\nexport const Divider: React.FC<Props> = ({\n  color = \"cl_lightGrey\",\n  sx,\n  ...props\n}) => {\n  return (\n    <Box\n      sx={{\n        bg: color,\n        ...props,\n        ...sx,\n      }}\n      data-test=\"divider\"\n    />\n  );\n};\n"],"names":["Divider","color","sx","props","jsx","Box"],"mappings":";;;AASO,MAAMA,IAA2B,CAAC;AAAA,EACvC,OAAAC,IAAQ;AAAA,EACR,IAAAC;AAAA,EACA,GAAGC;AACL,MAEIC,gBAAAA,EAAA;AAAA,EAACC;AAAAA,EAAA;AAAA,IACC,IAAI;AAAA,MACF,IAAIJ;AAAA,MACJ,GAAGE;AAAA,MACH,GAAGD;AAAA,IACL;AAAA,IACA,aAAU;AAAA,EAAA;AAAA;"}

package/lib/sd-component-library208.js

@@ -1,6 +1,6 @@
 import { j as e } from "./sd-component-library195.js";
-import "./sd-component-library196.js";
-import { Box as t } from "./sd-component-library197.js";
+import "./sd-component-library198.js";
+import { Box as t } from "./sd-component-library199.js";
 import { TwentyFourBold as d } from "./sd-component-library159.js";
 import { MaxMaxContainer as p } from "./sd-component-library44.js";
 const f = (o) => {

package/lib/sd-component-library211.js

@@ -1,60 +1,44 @@
-import { j as t } from "./sd-component-library195.js";
-import { Crumb as c } from "./sd-component-library20.js";
-const l = (s, h, p) => s.map(({ title: e, dontTranslate: r, onClick: u }, o) => /* @__PURE__ */ t.jsx(
-  c,
-  {
-    variant: h,
-    crumb: { title: e, dontTranslate: r },
-    isLast: o === s.length - 1,
-    textTransform: p,
-    onClick: u
-  },
-  e + o
-)), a = (s, h, p) => {
-  const e = [];
-  return s.slice(0, 2).forEach(({ title: r, dontTranslate: u, onClick: o }, m) => {
-    e.push(
-      /* @__PURE__ */ t.jsx(
-        c,
-        {
-          variant: h,
-          crumb: { title: r, dontTranslate: u },
-          isLast: !1,
-          textTransform: p,
-          onClick: o
-        },
-        r + m
-      )
-    );
-  }), e.push(
-    /* @__PURE__ */ t.jsx(
-      c,
-      {
-        variant: h,
-        crumb: { title: "..." },
-        isLast: !1,
-        textTransform: p
+import { j as o } from "./sd-component-library195.js";
+import p from "react";
+import "./sd-component-library198.js";
+import { Box as a } from "./sd-component-library199.js";
+import { AutocompleteOptionBox as n } from "./sd-component-library383.js";
+import { HorizontalDivider as d } from "./sd-component-library52.js";
+function j(s) {
+  const { results: t, value: i, onSelect: x, translateContent: l = !0 } = s;
+  return /* @__PURE__ */ o.jsx(
+    a,
+    {
+      sx: {
+        position: "absolute",
+        top: "100%",
+        bg: "white",
+        width: "100%",
+        borderRadius: "0px 0px 3px 3px",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: "#C8CCE5",
+        boxShadow: "2px 3px 10px rgba(211,223,255,0.25)",
+        zIndex: 100
       },
-      "..."
-    )
-  ), s.slice(s.length - 2, s.length).forEach(({ title: r, onClick: u, dontTranslate: o }, m) => {
-    e.push(
-      /* @__PURE__ */ t.jsx(
-        c,
-        {
-          variant: h,
-          crumb: { title: r, dontTranslate: o },
-          isLast: m === 1,
-          textTransform: p,
-          onClick: u
-        },
-        r + m
-      )
-    );
-  }), e;
-};
+      className: l ? void 0 : "no-translate",
+      "data-test": "results-box",
+      children: t.map(({ synonyms: r }, e) => /* @__PURE__ */ o.jsxs(p.Fragment, { children: [
+        /* @__PURE__ */ o.jsx(
+          n,
+          {
+            value: i,
+            synonyms: r,
+            onSelect: x
+          },
+          r.join()
+        ),
+        e !== t.length - 1 && /* @__PURE__ */ o.jsx(d, { color: "cl_lightGrey" })
+      ] }, e))
+    }
+  );
+}
 export {
-  a as renderMoreThanFiveCrumbs,
-  l as renderUpToFiveCrumbs
+  j as ResultsBox
 };
 //# sourceMappingURL=sd-component-library211.js.map

package/lib/sd-component-library211.js.map

@@ -1 +1 @@
-{"version":3,"file":"sd-component-library211.js","sources":["../src/components/breadcrumbs/breadcrumb/functions.tsx"],"sourcesContent":["import React, { CSSProperties } from \"react\";\n\nimport { Crumb, CrumbType } from \"./crumb\";\n\nexport const renderUpToFiveCrumbs = (\n  crumbs: CrumbType[],\n  variant: string | undefined,\n  textTransform: CSSProperties[\"textTransform\"]\n) => {\n  return crumbs.map(({ title, dontTranslate, onClick }, index: number) => (\n    <Crumb\n      variant={variant}\n      crumb={{ title, dontTranslate }}\n      isLast={index === crumbs.length - 1}\n      key={title + index}\n      textTransform={textTransform}\n      onClick={onClick}\n    />\n  ));\n};\n\nexport const renderMoreThanFiveCrumbs = (\n  crumbs: CrumbType[],\n  variant: string | undefined,\n  textTransform: CSSProperties[\"textTransform\"]\n) => {\n  const elements: JSX.Element[] = [];\n\n  crumbs\n    .slice(0, 2)\n    .forEach(({ title, dontTranslate, onClick }, index: number): void => {\n      elements.push(\n        <Crumb\n          variant={variant}\n          crumb={{ title, dontTranslate }}\n          isLast={false}\n          key={title + index}\n          textTransform={textTransform}\n          onClick={onClick}\n        />\n      );\n    });\n  elements.push(\n    <Crumb\n      variant={variant}\n      crumb={{ title: \"...\" }}\n      isLast={false}\n      textTransform={textTransform}\n      key=\"...\"\n    />\n  );\n\n  crumbs\n    .slice(crumbs.length - 2, crumbs.length)\n    .forEach(({ title, onClick, dontTranslate }, index: number): void => {\n      elements.push(\n        <Crumb\n          variant={variant}\n          crumb={{ title, dontTranslate }}\n          isLast={index === 1}\n          key={title + index}\n          textTransform={textTransform}\n          onClick={onClick}\n        />\n      );\n    });\n  return elements;\n};\n"],"names":["renderUpToFiveCrumbs","crumbs","variant","textTransform","title","dontTranslate","onClick","index","jsx","Crumb","renderMoreThanFiveCrumbs","elements"],"mappings":";;AAIO,MAAMA,IAAuB,CAClCC,GACAC,GACAC,MAEOF,EAAO,IAAI,CAAC,EAAE,OAAAG,GAAO,eAAAC,GAAe,SAAAC,EAAA,GAAWC,MACpDC,gBAAAA,EAAA;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,SAAAP;AAAA,IACA,OAAO,EAAE,OAAAE,GAAO,eAAAC,EAAc;AAAA,IAC9B,QAAQE,MAAUN,EAAO,SAAS;AAAA,IAElC,eAAAE;AAAA,IACA,SAAAG;AAAA,EAAA;AAAA,EAFKF,IAAQG;AAAA,CAIhB,GAGUG,IAA2B,CACtCT,GACAC,GACAC,MACG;AACH,QAAMQ,IAA0B,CAAA;AAG7B,SAAAV,EAAA,MAAM,GAAG,CAAC,EACV,QAAQ,CAAC,EAAE,OAAAG,GAAO,eAAAC,GAAe,SAAAC,EAAQ,GAAGC,MAAwB;AAC1D,IAAAI,EAAA;AAAA,MACPH,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAAP;AAAA,UACA,OAAO,EAAE,OAAAE,GAAO,eAAAC,EAAc;AAAA,UAC9B,QAAQ;AAAA,UAER,eAAAF;AAAA,UACA,SAAAG;AAAA,QAAA;AAAA,QAFKF,IAAQG;AAAA,MAGf;AAAA,IAAA;AAAA,EACF,CACD,GACMI,EAAA;AAAA,IACPH,gBAAAA,EAAA;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,SAAAP;AAAA,QACA,OAAO,EAAE,OAAO,MAAM;AAAA,QACtB,QAAQ;AAAA,QACR,eAAAC;AAAA,MAAA;AAAA,MACI;AAAA,IACN;AAAA,EAAA,GAGFF,EACG,MAAMA,EAAO,SAAS,GAAGA,EAAO,MAAM,EACtC,QAAQ,CAAC,EAAE,OAAAG,GAAO,SAAAE,GAAS,eAAAD,EAAA,GAAiBE,MAAwB;AAC1D,IAAAI,EAAA;AAAA,MACPH,gBAAAA,EAAA;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,SAAAP;AAAA,UACA,OAAO,EAAE,OAAAE,GAAO,eAAAC,EAAc;AAAA,UAC9B,QAAQE,MAAU;AAAA,UAElB,eAAAJ;AAAA,UACA,SAAAG;AAAA,QAAA;AAAA,QAFKF,IAAQG;AAAA,MAGf;AAAA,IAAA;AAAA,EACF,CACD,GACII;AACT;"}
+{"version":3,"file":"sd-component-library211.js","sources":["../src/components/inputs/autocomplete-input/partials/results-box/results-box.tsx"],"sourcesContent":["import React, { PropsWithChildren } from \"react\";\n\nimport { Box } from \"rebass\";\n\nimport { HorizontalDivider } from \"../../../../dividers/horizontal-divider\";\nimport { AutocompleteOptionBox } from \"../autocomplete-option-box\";\nimport { ResultsBoxProps as Props } from \"./interfaces\";\n\nexport function ResultsBox<T>(props: PropsWithChildren<Props<T>>) {\n  const { results, value, onSelect, translateContent = true } = props;\n\n  return (\n    <Box\n      sx={{\n        position: \"absolute\",\n        top: \"100%\",\n        bg: \"white\",\n        width: \"100%\",\n        borderRadius: \"0px 0px 3px 3px\",\n        borderWidth: \"1px\",\n        borderStyle: \"solid\",\n        borderColor: \"#C8CCE5\",\n        boxShadow: \"2px 3px 10px rgba(211,223,255,0.25)\",\n        zIndex: 100,\n      }}\n      className={!translateContent ? \"no-translate\" : undefined}\n      data-test=\"results-box\"\n    >\n      {results.map(({ synonyms }, idx) => (\n        <React.Fragment key={idx}>\n          <AutocompleteOptionBox\n            value={value}\n            synonyms={synonyms}\n            key={synonyms.join()}\n            onSelect={onSelect}\n          />\n          {idx !== results.length - 1 && (\n            <HorizontalDivider color=\"cl_lightGrey\" />\n          )}\n        </React.Fragment>\n      ))}\n    </Box>\n  );\n}\n"],"names":["ResultsBox","props","results","value","onSelect","translateContent","jsx","Box","synonyms","idx","jsxs","React","AutocompleteOptionBox","HorizontalDivider"],"mappings":";;;;;;AAQO,SAASA,EAAcC,GAAoC;AAChE,QAAM,EAAE,SAAAC,GAAS,OAAAC,GAAO,UAAAC,GAAU,kBAAAC,IAAmB,GAAS,IAAAJ;AAG5D,SAAAK,gBAAAA,EAAA;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,IAAI;AAAA,QACF,UAAU;AAAA,QACV,KAAK;AAAA,QACL,IAAI;AAAA,QACJ,OAAO;AAAA,QACP,cAAc;AAAA,QACd,aAAa;AAAA,QACb,aAAa;AAAA,QACb,aAAa;AAAA,QACb,WAAW;AAAA,QACX,QAAQ;AAAA,MACV;AAAA,MACA,WAAYF,IAAoC,SAAjB;AAAA,MAC/B,aAAU;AAAA,MAET,UAAAH,EAAQ,IAAI,CAAC,EAAE,UAAAM,EAAA,GAAYC,MAC1BC,gBAAAA,OAACC,EAAM,UAAN,EACC,UAAA;AAAA,QAAAL,gBAAAA,EAAA;AAAA,UAACM;AAAA,UAAA;AAAA,YACC,OAAAT;AAAA,YACA,UAAAK;AAAA,YAEA,UAAAJ;AAAA,UAAA;AAAA,UADKI,EAAS,KAAK;AAAA,QAErB;AAAA,QACCC,MAAQP,EAAQ,SAAS,KACvBI,gBAAAA,EAAA,IAAAO,GAAA,EAAkB,OAAM,gBAAe;AAAA,MAAA,EAAA,GARvBJ,CAUrB,CACD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/lib/sd-component-library212.js

@@ -1,13 +1,372 @@
-import i from "./sd-component-library294.js";
-function u(r, e, t) {
-  return e = i(e), e in r ? Object.defineProperty(r, e, {
-    value: t,
-    enumerable: !0,
-    configurable: !0,
-    writable: !0
-  }) : r[e] = t, r;
+import r, { forwardRef as l } from "react";
+import { Flex as m, Box as c } from "./sd-component-library309.js";
+import { props as v } from "./sd-component-library310.js";
+function i() {
+  return i = Object.assign || function(e) {
+    for (var t = 1; t < arguments.length; t++) {
+      var n = arguments[t];
+      for (var a in n)
+        Object.prototype.hasOwnProperty.call(n, a) && (e[a] = n[a]);
+    }
+    return e;
+  }, i.apply(this, arguments);
 }
+function d(e, t) {
+  if (e == null)
+    return {};
+  var n = g(e, t), a, o;
+  if (Object.getOwnPropertySymbols) {
+    var s = Object.getOwnPropertySymbols(e);
+    for (o = 0; o < s.length; o++)
+      a = s[o], !(t.indexOf(a) >= 0) && Object.prototype.propertyIsEnumerable.call(e, a) && (n[a] = e[a]);
+  }
+  return n;
+}
+function g(e, t) {
+  if (e == null)
+    return {};
+  var n = {}, a = Object.keys(e), o, s;
+  for (s = 0; s < a.length; s++)
+    o = a[s], !(t.indexOf(o) >= 0) && (n[o] = e[o]);
+  return n;
+}
+function x(e) {
+  return k(e) || E(e) || y();
+}
+function y() {
+  throw new TypeError("Invalid attempt to spread non-iterable instance");
+}
+function E(e) {
+  if (Symbol.iterator in Object(e) || Object.prototype.toString.call(e) === "[object Arguments]")
+    return Array.from(e);
+}
+function k(e) {
+  if (Array.isArray(e)) {
+    for (var t = 0, n = new Array(e.length); t < e.length; t++)
+      n[t] = e[t];
+    return n;
+  }
+}
+var w = [].concat(x(v), ["sx", "variant"]), _ = new RegExp("^(".concat(w.join("|"), ")$")), f = /^m[trblxy]?$/, h = function(t) {
+  return function(n) {
+    var a = {};
+    for (var o in n)
+      t(o || "") && (a[o] = n[o]);
+    return a;
+  };
+}, b = h(function(e) {
+  return _.test(e);
+}), R = h(function(e) {
+  return f.test(e);
+}), z = h(function(e) {
+  return !f.test(e);
+}), p = function(t) {
+  t.size;
+  var n = d(t, ["size"]);
+  return r.createElement(c, i({
+    as: "svg",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    viewBox: "0 0 24 24",
+    fill: "currentcolor"
+  }, n));
+}, F = l(function(e, t) {
+  return r.createElement(m, i({
+    ref: t,
+    as: "label",
+    tx: "forms",
+    variant: "label"
+  }, e, {
+    __css: {
+      width: "100%"
+    }
+  }));
+}), V = l(function(e, t) {
+  return r.createElement(c, i({
+    ref: t,
+    as: "input",
+    type: "text",
+    tx: "forms",
+    variant: "input"
+  }, e, {
+    __css: {
+      display: "block",
+      width: "100%",
+      p: 2,
+      appearance: "none",
+      fontSize: "inherit",
+      lineHeight: "inherit",
+      border: "1px solid",
+      borderRadius: "default",
+      color: "inherit",
+      bg: "transparent"
+    }
+  }));
+}), C = function(t) {
+  return r.createElement(p, t, r.createElement("path", {
+    d: "M7 10l5 5 5-5z"
+  }));
+}, L = l(function(e, t) {
+  return r.createElement(m, R(e), r.createElement(c, i({
+    ref: t,
+    as: "select",
+    tx: "forms",
+    variant: "select"
+  }, z(e), {
+    __css: {
+      display: "block",
+      width: "100%",
+      p: 2,
+      appearance: "none",
+      fontSize: "inherit",
+      lineHeight: "inherit",
+      border: "1px solid",
+      borderRadius: "default",
+      color: "inherit",
+      bg: "transparent"
+    }
+  })), r.createElement(C, {
+    sx: {
+      ml: -28,
+      alignSelf: "center",
+      pointerEvents: "none"
+    }
+  }));
+});
+l(function(e, t) {
+  return r.createElement(c, i({
+    ref: t,
+    as: "textarea",
+    tx: "forms",
+    variant: "textarea"
+  }, e, {
+    __css: {
+      display: "block",
+      width: "100%",
+      p: 2,
+      appearance: "none",
+      fontSize: "inherit",
+      lineHeight: "inherit",
+      border: "1px solid",
+      borderRadius: "default",
+      color: "inherit",
+      bg: "transparent"
+    }
+  }));
+});
+var S = function(t) {
+  return r.createElement(p, t, r.createElement("path", {
+    d: "M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+}, O = function(t) {
+  return r.createElement(p, t, r.createElement("path", {
+    d: "M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
+  }));
+}, P = function(t) {
+  return r.createElement(r.Fragment, null, r.createElement(S, i({}, t, {
+    __css: {
+      display: "none",
+      "input:checked ~ &": {
+        display: "block"
+      }
+    }
+  })), r.createElement(O, i({}, t, {
+    __css: {
+      display: "block",
+      "input:checked ~ &": {
+        display: "none"
+      }
+    }
+  })));
+};
+l(function(e, t) {
+  var n = e.className, a = e.sx, o = e.variant, s = o === void 0 ? "radio" : o, u = d(e, ["className", "sx", "variant"]);
+  return r.createElement(c, null, r.createElement(c, i({
+    ref: t,
+    as: "input",
+    type: "radio"
+  }, u, {
+    sx: {
+      position: "absolute",
+      opacity: 0,
+      zIndex: -1,
+      width: 1,
+      height: 1,
+      overflow: "hidden"
+    }
+  })), r.createElement(c, i({
+    as: P,
+    "aria-hidden": "true",
+    tx: "forms",
+    variant: s,
+    className: n,
+    sx: a
+  }, b(u), {
+    __css: {
+      mr: 2,
+      borderRadius: 9999,
+      color: "gray",
+      "input:checked ~ &": {
+        color: "primary"
+      },
+      "input:focus ~ &": {
+        bg: "highlight"
+      }
+    }
+  })));
+});
+var j = function(t) {
+  return r.createElement(p, t, r.createElement("path", {
+    d: "M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
+  }));
+}, I = function(t) {
+  return r.createElement(p, t, r.createElement("path", {
+    d: "M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
+  }));
+}, A = function(t) {
+  return r.createElement(r.Fragment, null, r.createElement(j, i({}, t, {
+    __css: {
+      display: "none",
+      "input:checked ~ &": {
+        display: "block"
+      }
+    }
+  })), r.createElement(I, i({}, t, {
+    __css: {
+      display: "block",
+      "input:checked ~ &": {
+        display: "none"
+      }
+    }
+  })));
+};
+l(function(e, t) {
+  var n = e.className, a = e.sx, o = e.variant, s = o === void 0 ? "checkbox" : o, u = d(e, ["className", "sx", "variant"]);
+  return r.createElement(c, null, r.createElement(c, i({
+    ref: t,
+    as: "input",
+    type: "checkbox"
+  }, u, {
+    sx: {
+      position: "absolute",
+      opacity: 0,
+      zIndex: -1,
+      width: 1,
+      height: 1,
+      overflow: "hidden"
+    }
+  })), r.createElement(c, i({
+    as: A,
+    "aria-hidden": "true",
+    tx: "forms",
+    variant: s,
+    className: n,
+    sx: a
+  }, b(u), {
+    __css: {
+      mr: 2,
+      borderRadius: 4,
+      color: "gray",
+      "input:checked ~ &": {
+        color: "primary"
+      },
+      "input:focus ~ &": {
+        color: "primary",
+        bg: "highlight"
+      }
+    }
+  })));
+});
+l(function(e, t) {
+  var n = i({}, e);
+  return r.createElement(c, i({
+    ref: t,
+    as: "input",
+    type: "range",
+    tx: "forms",
+    variant: "slider"
+  }, n, {
+    __css: {
+      display: "block",
+      width: "100%",
+      height: 4,
+      my: 2,
+      cursor: "pointer",
+      appearance: "none",
+      borderRadius: 9999,
+      color: "inherit",
+      bg: "gray",
+      ":focus": {
+        outline: "none",
+        color: "primary"
+      },
+      "&::-webkit-slider-thumb": {
+        appearance: "none",
+        width: 16,
+        height: 16,
+        bg: "currentcolor",
+        border: 0,
+        borderRadius: 9999,
+        variant: "forms.slider.thumb"
+      }
+    }
+  }));
+});
+l(function(e, t) {
+  var n = e.checked, a = d(e, ["checked"]);
+  return r.createElement(c, i({
+    ref: t,
+    as: "button",
+    type: "button",
+    role: "switch",
+    tx: "forms",
+    variant: "switch",
+    "aria-checked": n
+  }, a, {
+    __css: {
+      appearance: "none",
+      m: 0,
+      p: 0,
+      width: 40,
+      height: 24,
+      color: "primary",
+      bg: "transparent",
+      border: "1px solid",
+      borderColor: "primary",
+      borderRadius: 9999,
+      "&[aria-checked=true]": {
+        bg: "primary"
+      },
+      ":focus": {
+        outline: "none",
+        boxShadow: "0 0 0 2px"
+      }
+    }
+  }), r.createElement(c, {
+    "aria-hidden": !0,
+    style: {
+      transform: n ? "translateX(16px)" : "translateX(0)"
+    },
+    sx: {
+      mt: "-1px",
+      ml: "-1px",
+      width: 24,
+      height: 24,
+      borderRadius: 9999,
+      border: "1px solid",
+      borderColor: "primary",
+      bg: "background",
+      transitionProperty: "transform",
+      transitionTimingFunction: "ease-out",
+      transitionDuration: "0.1s",
+      variant: "forms.switch.thumb"
+    }
+  }));
+});
 export {
-  u as default
+  V as Input,
+  F as Label,
+  L as Select
 };
 //# sourceMappingURL=sd-component-library212.js.map