@gobolt/genesis 0.1.6 → 0.2.1

package/dist/components/SegmentedControls/styles.d.ts

@@ -1,11 +1,3 @@
 import { GenesisTheme } from '../../styles/theme/genesis-theme.types';
-interface StyledSegmentedControlsProps {
-    theme?: GenesisTheme;
-    type?: "primary" | "secondary";
-    state?: "active" | "disabled";
-}
 export declare const getGenesisClass: ({ colors, borderRadius, sizing }: GenesisTheme, type?: string, state?: string) => string;
-export declare const SegmentedControls: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<Omit<import('antd').SegmentedProps<unknown> & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
-    ref?: import('react').Ref<HTMLDivElement>;
-}, StyledSegmentedControlsProps>> & string & Omit<(<ValueType>(props: import('antd').SegmentedProps<ValueType> & React.RefAttributes<HTMLDivElement>) => ReturnType<import('react').ForwardRefExoticComponent<Omit<import('antd').SegmentedProps<import('rc-segmented').SegmentedValue>, "ref"> & import('react').RefAttributes<HTMLDivElement>>>) & Pick<import('react').FC<{}>, "displayName">, keyof import('react').Component<any, {}, any>>;
-export {};
+export declare const SegmentedControls: any;

package/dist/components/SegmentedControls/styles.js

@@ -1,522 +1,30 @@
-import { d as ge } from "../../styled-components.browser.esm-C47QHsU4.js";
-import * as i from "react";
-import { a as B, _ as q, c as L, g as be, e as Q, b as _, f as ne } from "../../presets-CSXMiWyc.js";
-import { u as Se } from "../../useMergedState-D1-TbeEv.js";
-import { o as pe } from "../../omit-B_u6A-HL.js";
-import { h as $e, p as ye, q as ie, g as Ce, m as we, j as xe, o as Ne, f as E, s as Re, t as Oe, l as Me } from "../../CSSMotionList-DB0khM6h.js";
-import { u as Ie } from "../../useId-DLf1xVuv.js";
-import { u as je } from "../../useSize-Ct1guc-z.js";
-var k = function(t, n) {
-  if (!t) return null;
-  var a = {
-    left: t.offsetLeft,
-    right: t.parentElement.clientWidth - t.clientWidth - t.offsetLeft,
-    width: t.clientWidth,
-    top: t.offsetTop,
-    bottom: t.parentElement.clientHeight - t.clientHeight - t.offsetTop,
-    height: t.clientHeight
-  };
-  return n ? {
-    left: 0,
-    right: 0,
-    width: 0,
-    top: a.top,
-    bottom: a.bottom,
-    height: a.height
-  } : {
-    left: a.left,
-    right: a.right,
-    width: a.width,
-    top: 0,
-    bottom: 0,
-    height: 0
-  };
-}, C = function(t) {
-  return t !== void 0 ? "".concat(t, "px") : void 0;
-};
-function Ee(e) {
-  var t = e.prefixCls, n = e.containerRef, a = e.value, o = e.getValueIndex, s = e.motionName, S = e.onMotionStart, h = e.onMotionEnd, b = e.direction, w = e.vertical, d = w === void 0 ? !1 : w, N = i.useRef(null), H = i.useState(a), R = B(H, 2), v = R[0], O = R[1], M = function(j) {
-    var x, A = o(j), y = (x = n.current) === null || x === void 0 ? void 0 : x.querySelectorAll(".".concat(t, "-item"))[A];
-    return (y == null ? void 0 : y.offsetParent) && y;
-  }, P = i.useState(null), m = B(P, 2), r = m[0], I = m[1], T = i.useState(null), g = B(T, 2), l = g[0], D = g[1];
-  $e(function() {
-    if (v !== a) {
-      var c = M(v), j = M(a), x = k(c, d), A = k(j, d);
-      O(a), I(x), D(A), c && j ? S() : h();
-    }
-  }, [a]);
-  var p = i.useMemo(function() {
-    if (d) {
-      var c;
-      return C((c = r == null ? void 0 : r.top) !== null && c !== void 0 ? c : 0);
-    }
-    return C(b === "rtl" ? -(r == null ? void 0 : r.right) : r == null ? void 0 : r.left);
-  }, [d, b, r]), $ = i.useMemo(function() {
-    if (d) {
-      var c;
-      return C((c = l == null ? void 0 : l.top) !== null && c !== void 0 ? c : 0);
-    }
-    return C(b === "rtl" ? -(l == null ? void 0 : l.right) : l == null ? void 0 : l.left);
-  }, [d, b, l]), K = function() {
-    return d ? {
-      transform: "translateY(var(--thumb-start-top))",
-      height: "var(--thumb-start-height)"
-    } : {
-      transform: "translateX(var(--thumb-start-left))",
-      width: "var(--thumb-start-width)"
-    };
-  }, V = function() {
-    return d ? {
-      transform: "translateY(var(--thumb-active-top))",
-      height: "var(--thumb-active-height)"
-    } : {
-      transform: "translateX(var(--thumb-active-left))",
-      width: "var(--thumb-active-width)"
-    };
-  }, F = function() {
-    I(null), D(null), h();
-  };
-  return !r || !l ? null : /* @__PURE__ */ i.createElement(ye, {
-    visible: !0,
-    motionName: s,
-    motionAppear: !0,
-    onAppearStart: K,
-    onAppearActive: V,
-    onVisibleChanged: F
-  }, function(c, j) {
-    var x = c.className, A = c.style, y = q(q({}, A), {}, {
-      "--thumb-start-left": p,
-      "--thumb-start-width": C(r == null ? void 0 : r.width),
-      "--thumb-active-left": $,
-      "--thumb-active-width": C(l == null ? void 0 : l.width),
-      "--thumb-start-top": p,
-      "--thumb-start-height": C(r == null ? void 0 : r.height),
-      "--thumb-active-top": $,
-      "--thumb-active-height": C(l == null ? void 0 : l.height)
-    }), X = {
-      ref: ie(N, j),
-      style: y,
-      className: L("".concat(t, "-thumb"), x)
-    };
-    return process.env.NODE_ENV === "test" && (X["data-test-style"] = JSON.stringify(y)), /* @__PURE__ */ i.createElement("div", X);
-  });
-}
-var He = ["prefixCls", "direction", "vertical", "options", "disabled", "defaultValue", "value", "name", "onChange", "className", "motionName"];
-function Pe(e) {
-  if (typeof e.title < "u")
-    return e.title;
-  if (ne(e.label) !== "object") {
-    var t;
-    return (t = e.label) === null || t === void 0 ? void 0 : t.toString();
-  }
-}
-function De(e) {
-  return e.map(function(t) {
-    if (ne(t) === "object" && t !== null) {
-      var n = Pe(t);
-      return q(q({}, t), {}, {
-        title: n
-      });
-    }
-    return {
-      label: t == null ? void 0 : t.toString(),
-      title: t == null ? void 0 : t.toString(),
-      value: t
-    };
-  });
-}
-var Ve = function(t) {
-  var n = t.prefixCls, a = t.className, o = t.disabled, s = t.checked, S = t.label, h = t.title, b = t.value, w = t.name, d = t.onChange, N = t.onFocus, H = t.onBlur, R = t.onKeyDown, v = t.onKeyUp, O = t.onMouseDown, M = function(m) {
-    o || d(m, b);
-  };
-  return /* @__PURE__ */ i.createElement("label", {
-    className: L(a, _({}, "".concat(n, "-item-disabled"), o)),
-    onMouseDown: O
-  }, /* @__PURE__ */ i.createElement("input", {
-    name: w,
-    className: "".concat(n, "-item-input"),
-    type: "radio",
-    disabled: o,
-    checked: s,
-    onChange: M,
-    onFocus: N,
-    onBlur: H,
-    onKeyDown: R,
-    onKeyUp: v
-  }), /* @__PURE__ */ i.createElement("div", {
-    className: "".concat(n, "-item-label"),
-    title: h,
-    "aria-selected": s
-  }, S));
-}, oe = /* @__PURE__ */ i.forwardRef(function(e, t) {
-  var n, a, o = e.prefixCls, s = o === void 0 ? "rc-segmented" : o, S = e.direction, h = e.vertical, b = e.options, w = b === void 0 ? [] : b, d = e.disabled, N = e.defaultValue, H = e.value, R = e.name, v = e.onChange, O = e.className, M = O === void 0 ? "" : O, P = e.motionName, m = P === void 0 ? "thumb-motion" : P, r = be(e, He), I = i.useRef(null), T = i.useMemo(function() {
-    return ie(I, t);
-  }, [I, t]), g = i.useMemo(function() {
-    return De(w);
-  }, [w]), l = Se((n = g[0]) === null || n === void 0 ? void 0 : n.value, {
-    value: H,
-    defaultValue: N
-  }), D = B(l, 2), p = D[0], $ = D[1], K = i.useState(!1), V = B(K, 2), F = V[0], c = V[1], j = function(f, z) {
-    $(z), v == null || v(z);
-  }, x = pe(r, ["children"]), A = i.useState(!1), y = B(A, 2), X = y[0], U = y[1], le = i.useState(!1), G = B(le, 2), se = G[0], Y = G[1], ce = function() {
-    Y(!0);
-  }, de = function() {
-    Y(!1);
-  }, ue = function() {
-    U(!1);
-  }, me = function(f) {
-    f.key === "Tab" && U(!0);
-  }, J = function(f) {
-    var z = g.findIndex(function(he) {
-      return he.value === p;
-    }), Z = g.length, fe = (z + f + Z) % Z, W = g[fe];
-    W && ($(W.value), v == null || v(W.value));
-  }, ve = function(f) {
-    switch (f.key) {
-      case "ArrowLeft":
-      case "ArrowUp":
-        J(-1);
-        break;
-      case "ArrowRight":
-      case "ArrowDown":
-        J(1);
-        break;
-    }
-  };
-  return /* @__PURE__ */ i.createElement("div", Q({
-    role: "radiogroup",
-    "aria-label": "segmented control",
-    tabIndex: d ? void 0 : 0
-  }, x, {
-    className: L(s, (a = {}, _(a, "".concat(s, "-rtl"), S === "rtl"), _(a, "".concat(s, "-disabled"), d), _(a, "".concat(s, "-vertical"), h), a), M),
-    ref: T
-  }), /* @__PURE__ */ i.createElement("div", {
-    className: "".concat(s, "-group")
-  }, /* @__PURE__ */ i.createElement(Ee, {
-    vertical: h,
-    prefixCls: s,
-    value: p,
-    containerRef: I,
-    motionName: "".concat(s, "-").concat(m),
-    direction: S,
-    getValueIndex: function(f) {
-      return g.findIndex(function(z) {
-        return z.value === f;
-      });
-    },
-    onMotionStart: function() {
-      c(!0);
-    },
-    onMotionEnd: function() {
-      c(!1);
-    }
-  }), g.map(function(u) {
-    var f;
-    return /* @__PURE__ */ i.createElement(Ve, Q({}, u, {
-      name: R,
-      key: u.value,
-      prefixCls: s,
-      className: L(u.className, "".concat(s, "-item"), (f = {}, _(f, "".concat(s, "-item-selected"), u.value === p && !F), _(f, "".concat(s, "-item-focused"), se && X && u.value === p), f)),
-      checked: u.value === p,
-      onChange: j,
-      onFocus: ce,
-      onBlur: de,
-      onKeyDown: ve,
-      onKeyUp: me,
-      onMouseDown: ue,
-      disabled: !!d || !!u.disabled
-    }));
-  })));
-});
-process.env.NODE_ENV !== "production" && (oe.displayName = "Segmented");
-var Ae = oe;
-function ee(e, t) {
-  return {
-    [`${e}, ${e}:hover, ${e}:focus`]: {
-      color: t.colorTextDisabled,
-      cursor: "not-allowed"
-    }
-  };
-}
-function te(e) {
-  return {
-    backgroundColor: e.itemSelectedBg,
-    boxShadow: e.boxShadowTertiary
-  };
-}
-const Be = Object.assign({
-  overflow: "hidden"
-}, Oe), ze = (e) => {
-  const {
-    componentCls: t
-  } = e, n = e.calc(e.controlHeight).sub(e.calc(e.trackPadding).mul(2)).equal(), a = e.calc(e.controlHeightLG).sub(e.calc(e.trackPadding).mul(2)).equal(), o = e.calc(e.controlHeightSM).sub(e.calc(e.trackPadding).mul(2)).equal();
-  return {
-    [t]: Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, xe(e)), {
-      display: "inline-block",
-      padding: e.trackPadding,
-      color: e.itemColor,
-      background: e.trackBg,
-      borderRadius: e.borderRadius,
-      transition: `all ${e.motionDurationMid} ${e.motionEaseInOut}`
-    }), Ne(e)), {
-      [`${t}-group`]: {
-        position: "relative",
-        display: "flex",
-        alignItems: "stretch",
-        justifyItems: "flex-start",
-        flexDirection: "row",
-        width: "100%"
-      },
-      // RTL styles
-      [`&${t}-rtl`]: {
-        direction: "rtl"
-      },
-      [`&${t}-vertical`]: {
-        [`${t}-group`]: {
-          flexDirection: "column"
-        },
-        [`${t}-thumb`]: {
-          width: "100%",
-          height: 0,
-          padding: `0 ${E(e.paddingXXS)}`
-        }
-      },
-      // block styles
-      [`&${t}-block`]: {
-        display: "flex"
-      },
-      [`&${t}-block ${t}-item`]: {
-        flex: 1,
-        minWidth: 0
-      },
-      // item styles
-      [`${t}-item`]: {
-        position: "relative",
-        textAlign: "center",
-        cursor: "pointer",
-        transition: `color ${e.motionDurationMid} ${e.motionEaseInOut}`,
-        borderRadius: e.borderRadiusSM,
-        // Fix Safari render bug
-        // https://github.com/ant-design/ant-design/issues/45250
-        transform: "translateZ(0)",
-        "&-selected": Object.assign(Object.assign({}, te(e)), {
-          color: e.itemSelectedColor
-        }),
-        "&-focused": Object.assign({}, Re(e)),
-        "&::after": {
-          content: '""',
-          position: "absolute",
-          zIndex: -1,
-          width: "100%",
-          height: "100%",
-          top: 0,
-          insetInlineStart: 0,
-          borderRadius: "inherit",
-          opacity: 0,
-          transition: `opacity ${e.motionDurationMid}`,
-          // This is mandatory to make it not clickable or hoverable
-          // Ref: https://github.com/ant-design/ant-design/issues/40888
-          pointerEvents: "none"
-        },
-        [`&:hover:not(${t}-item-selected):not(${t}-item-disabled)`]: {
-          color: e.itemHoverColor,
-          "&::after": {
-            opacity: 1,
-            backgroundColor: e.itemHoverBg
-          }
-        },
-        [`&:active:not(${t}-item-selected):not(${t}-item-disabled)`]: {
-          color: e.itemHoverColor,
-          "&::after": {
-            opacity: 1,
-            backgroundColor: e.itemActiveBg
-          }
-        },
-        "&-label": Object.assign({
-          minHeight: n,
-          lineHeight: E(n),
-          padding: `0 ${E(e.segmentedPaddingHorizontal)}`
-        }, Be),
-        // syntactic sugar to add `icon` for Segmented Item
-        "&-icon + *": {
-          marginInlineStart: e.calc(e.marginSM).div(2).equal()
-        },
-        "&-input": {
-          position: "absolute",
-          insetBlockStart: 0,
-          insetInlineStart: 0,
-          width: 0,
-          height: 0,
-          opacity: 0,
-          pointerEvents: "none"
-        }
-      },
-      // thumb styles
-      [`${t}-thumb`]: Object.assign(Object.assign({}, te(e)), {
-        position: "absolute",
-        insetBlockStart: 0,
-        insetInlineStart: 0,
-        width: 0,
-        height: "100%",
-        padding: `${E(e.paddingXXS)} 0`,
-        borderRadius: e.borderRadiusSM,
-        transition: `transform ${e.motionDurationSlow} ${e.motionEaseInOut}, height ${e.motionDurationSlow} ${e.motionEaseInOut}`,
-        [`& ~ ${t}-item:not(${t}-item-selected):not(${t}-item-disabled)::after`]: {
-          backgroundColor: "transparent"
-        }
-      }),
-      // size styles
-      [`&${t}-lg`]: {
-        borderRadius: e.borderRadiusLG,
-        [`${t}-item-label`]: {
-          minHeight: a,
-          lineHeight: E(a),
-          padding: `0 ${E(e.segmentedPaddingHorizontal)}`,
-          fontSize: e.fontSizeLG
-        },
-        [`${t}-item, ${t}-thumb`]: {
-          borderRadius: e.borderRadius
-        }
-      },
-      [`&${t}-sm`]: {
-        borderRadius: e.borderRadiusSM,
-        [`${t}-item-label`]: {
-          minHeight: o,
-          lineHeight: E(o),
-          padding: `0 ${E(e.segmentedPaddingHorizontalSM)}`
-        },
-        [`${t}-item, ${t}-thumb`]: {
-          borderRadius: e.borderRadiusXS
-        }
-      }
-    }), ee(`&-disabled ${t}-item`, e)), ee(`${t}-item-disabled`, e)), {
-      // transition effect when `appear-active`
-      [`${t}-thumb-motion-appear-active`]: {
-        transition: `transform ${e.motionDurationSlow} ${e.motionEaseInOut}, width ${e.motionDurationSlow} ${e.motionEaseInOut}`,
-        willChange: "transform, width"
-      },
-      [`&${t}-shape-round`]: {
-        borderRadius: 9999,
-        [`${t}-item, ${t}-thumb`]: {
-          borderRadius: 9999
-        }
-      }
-    })
-  };
-}, _e = (e) => {
-  const {
-    colorTextLabel: t,
-    colorText: n,
-    colorFillSecondary: a,
-    colorBgElevated: o,
-    colorFill: s,
-    lineWidthBold: S,
-    colorBgLayout: h
-  } = e;
-  return {
-    trackPadding: S,
-    trackBg: h,
-    itemColor: t,
-    itemHoverColor: n,
-    itemHoverBg: a,
-    itemSelectedBg: o,
-    itemActiveBg: s,
-    itemSelectedColor: n
-  };
-}, Te = Ce("Segmented", (e) => {
-  const {
-    lineWidth: t,
-    calc: n
-  } = e, a = we(e, {
-    segmentedPaddingHorizontal: n(e.controlPaddingHorizontal).sub(t).equal(),
-    segmentedPaddingHorizontalSM: n(e.controlPaddingHorizontalSM).sub(t).equal()
-  });
-  return [ze(a)];
-}, _e);
-var ae = function(e, t) {
-  var n = {};
-  for (var a in e) Object.prototype.hasOwnProperty.call(e, a) && t.indexOf(a) < 0 && (n[a] = e[a]);
-  if (e != null && typeof Object.getOwnPropertySymbols == "function") for (var o = 0, a = Object.getOwnPropertySymbols(e); o < a.length; o++)
-    t.indexOf(a[o]) < 0 && Object.prototype.propertyIsEnumerable.call(e, a[o]) && (n[a[o]] = e[a[o]]);
-  return n;
-};
-function Ke(e) {
-  return typeof e == "object" && !!(e != null && e.icon);
-}
-const Fe = /* @__PURE__ */ i.forwardRef((e, t) => {
-  const n = Ie(), {
-    prefixCls: a,
-    className: o,
-    rootClassName: s,
-    block: S,
-    options: h = [],
-    size: b = "middle",
-    style: w,
-    vertical: d,
-    shape: N = "default",
-    name: H = n
-  } = e, R = ae(e, ["prefixCls", "className", "rootClassName", "block", "options", "size", "style", "vertical", "shape", "name"]), {
-    getPrefixCls: v,
-    direction: O,
-    className: M,
-    style: P
-  } = Me("segmented"), m = v("segmented", a), [r, I, T] = Te(m), g = je(b), l = i.useMemo(() => h.map(($) => {
-    if (Ke($)) {
-      const {
-        icon: K,
-        label: V
-      } = $, F = ae($, ["icon", "label"]);
-      return Object.assign(Object.assign({}, F), {
-        label: /* @__PURE__ */ i.createElement(i.Fragment, null, /* @__PURE__ */ i.createElement("span", {
-          className: `${m}-item-icon`
-        }, K), V && /* @__PURE__ */ i.createElement("span", null, V))
-      });
-    }
-    return $;
-  }), [h, m]), D = L(o, s, M, {
-    [`${m}-block`]: S,
-    [`${m}-sm`]: g === "small",
-    [`${m}-lg`]: g === "large",
-    [`${m}-vertical`]: d,
-    [`${m}-shape-${N}`]: N === "round"
-  }, I, T), p = Object.assign(Object.assign({}, P), w);
-  return r(/* @__PURE__ */ i.createElement(Ae, Object.assign({}, R, {
-    name: H,
-    className: D,
-    style: p,
-    options: l,
-    ref: t,
-    prefixCls: m,
-    direction: O,
-    vertical: d
-  })));
-}), re = Fe;
-process.env.NODE_ENV !== "production" && (re.displayName = "Segmented");
-const Le = ({ colors: e, borderRadius: t, sizing: n }, a = "primary", o = "active") => `
+import { styled as a } from "../../utils/styled.js";
+import i from "../../node_modules/antd/es/segmented/index.js";
+const s = ({ colors: e, borderRadius: r, sizing: o }, t = "primary", n = "active") => `
   &.ant-segmented {
-    border-radius: ${t.BorderRadiusMd};
+    border-radius: ${r.BorderRadiusMd};
     color: ${e.onsurface.copy};
     
     .ant-segmented-item {
-      color: ${e[a].text};
+      color: ${e[t].text};
       transition: all 0.3s;
       
       &-selected {
-        background: ${e[a][o]};
-        color: ${e[a].textContrast};
+        background: ${e[t][n]};
+        color: ${e[t].textContrast};
       }
       
       &:hover {
-        color: ${e[a].hover};
+        color: ${e[t].hover};
       }
     }
   }
-`, Ze = ge(
-  re
+`, c = a(
+  i
 )`
-  ${({ theme: e, type: t = "primary", state: n = "active" }) => Le(e, t, n)}
+  ${({ theme: e, type: r = "primary", state: o = "active" }) => s(e, r, o)}
 `;
 export {
-  Ze as SegmentedControls,
-  Le as getGenesisClass
+  c as SegmentedControls,
+  s as getGenesisClass
 };

package/dist/components/Select/DropdownChevron.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("react/jsx-runtime"),n=l=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:20,height:20,fill:"none",...l,children:e.jsx("path",{fill:"#222",fillRule:"evenodd",d:"M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414Z",clipRule:"evenodd"})});module.exports=n;

package/dist/components/Select/Select.cjs

@@ -0,0 +1,6 @@
+"use strict";const n=require("react/jsx-runtime"),c=require("react"),l=require("../../constants/index.cjs"),p=require("./DropdownChevron.cjs"),t=require("./styles.cjs"),x=require("../../providers/useGenesis.cjs"),m=({type:s=l.TYPE.primary,state:r,variant:d="none",defaultValue:h,onChange:f,...u})=>{const{breakpoint:j}=x.useGenesis(),[i,o]=c.useState(!1);c.useEffect(()=>{const e=document.createElement("style");return e.textContent=`
+      .ant-select-dropdown {
+        padding: 0px !important;
+        border-radius: 0px !important;
+      }
+    `,document.head.appendChild(e),()=>{document.head.removeChild(e)}},[]);const a=e=>n.jsx(t.SelectDropdown,{type:s,state:r,children:n.jsx(t.StyledMenuItem,{type:s,state:r,children:e})});return n.jsx(t.SelectWrapper,{$isFocused:i,type:s,children:n.jsx(t.Select,{...u,$variant:d,suffixIcon:n.jsx(p,{}),dropdownRender:a,onFocus:()=>o(!0),onBlur:()=>o(!1)})})};module.exports=m;

package/dist/components/Select/Select.d.ts

@@ -1,13 +1,16 @@
 import { default as React } from 'react';
 import { TYPE, STATE } from '../../constants';
 import { SelectProps as AntSelectProps } from 'antd';
-export interface SelectProps extends Omit<AntSelectProps, "options"> {
+export interface SelectProps extends Omit<AntSelectProps, "variant"> {
     type?: keyof typeof TYPE;
     state?: keyof typeof STATE;
     options?: {
         value: string;
         label: React.ReactNode;
     }[];
+    variant?: "simple" | "none";
+    defaultValue?: string | string[] | number | number[] | unknown;
+    onChange?: (value: string) => void;
 }
-declare const Select: ({ type, state, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+declare const Select: ({ type, state, variant, defaultValue, onChange, ...rest }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export default Select;

package/dist/components/Select/Select.js

@@ -1,29 +1,33 @@
 import { jsx as o } from "react/jsx-runtime";
-import c, { useEffect as m } from "react";
-import "../../providers/BreakpointThemeProvider.js";
-import { u as p } from "../../Typography-8BO7aTuQ.js";
+import a, { useEffect as m } from "react";
 import { TYPE as u } from "../../constants/index.js";
 import i from "./DropdownChevron.js";
-import { SelectWrapper as l, Select as a, SelectDropdown as f, StyledMenuItem as h } from "./styles.js";
-const v = ({
+import { SelectWrapper as l, Select as p, SelectDropdown as f, StyledMenuItem as h } from "./styles.js";
+import { useGenesis as S } from "../../providers/useGenesis.js";
+const b = ({
   type: t = u.primary,
   state: r,
-  ...d
+  variant: d = "none",
+  defaultValue: w,
+  onChange: x,
+  ...s
 }) => {
-  const { breakpoint: S } = p(), [s, n] = c.useState(!1);
+  const { breakpoint: C } = S(), [c, n] = a.useState(!1);
   return m(() => {
     const e = document.createElement("style");
     return e.textContent = `
       .ant-select-dropdown {
         padding: 0px !important;
+        border-radius: 0px !important;
       }
     `, document.head.appendChild(e), () => {
       document.head.removeChild(e);
     };
-  }, []), /* @__PURE__ */ o(l, { $isFocused: s, type: t, children: /* @__PURE__ */ o(
-    a,
+  }, []), /* @__PURE__ */ o(l, { $isFocused: c, type: t, children: /* @__PURE__ */ o(
+    p,
     {
-      ...d,
+      ...s,
+      $variant: d,
       suffixIcon: /* @__PURE__ */ o(i, {}),
       dropdownRender: (e) => /* @__PURE__ */ o(f, { type: t, state: r, children: /* @__PURE__ */ o(h, { type: t, state: r, children: e }) }),
       onFocus: () => n(!0),
@@ -32,5 +36,5 @@ const v = ({
   ) });
 };
 export {
-  v as default
+  b as default
 };

package/dist/components/Select/__stories__/Select.stories.d.ts

@@ -7,3 +7,4 @@ export declare const Default: Story;
 export declare const Filled: Story;
 export declare const Focussed: Story;
 export declare const Disabled: Story;
+export declare const Simple: Story;