@gobolt/genesis 0.3.1 → 0.3.2

package/dist/index.cjs

@@ -74936,6 +74936,415 @@ const Message$1 = ({ message: message2, handle, isThinking = false }) => {
     ) : /* @__PURE__ */ jsxRuntime.jsx(MessageText, { children: message2 }) })
   ] });
 };
+const getStateColors = (colors2, type4, state) => {
+  const filled = {
+    color: colors2.inputs.onsurface.active,
+    borderColor: colors2[TYPE.secondary].active.borderColor,
+    ringColor: colors2[type4].focussed.ringColor
+  };
+  const success = {
+    color: colors2.status.success.default,
+    borderColor: colors2.status.success.default,
+    ringColor: colors2.status.success.ringColor
+  };
+  const error2 = {
+    color: colors2.status.error.default,
+    borderColor: colors2.status.error.default,
+    ringColor: colors2.status.error.ringColor
+  };
+  const themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled ? {
+    color: colors2.inputs.onsurface.active,
+    backgroundColor: colors2.inputs.surface.active,
+    borderColor: colors2.inputs.surface.border,
+    ringColor: colors2[type4][state].ringColor
+  } : null;
+  const stateMap = {
+    filled,
+    error: error2,
+    success,
+    themeState
+  };
+  const getValidKey = (state2) => {
+    const validStates = [STATE.filled, STATE.error, STATE.success];
+    return validStates.includes(state2) ? state2 : "themeState";
+  };
+  const css = stateMap[getValidKey(state)];
+  return css;
+};
+const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
+  const stateColors = getStateColors(colors2, type4, state);
+  const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
+    if (hasAfterAddon2 && !hasBeforeAddon2) {
+      return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
+    }
+    if (hasBeforeAddon2 && !hasAfterAddon2) {
+      return `0px ${borderRadius2.BorderRadiusMd}px ${borderRadius2.BorderRadiusMd}px 0px`;
+    }
+    return `0px`;
+  };
+  return `
+    &.ant-input {
+        font-family: 'Inter', sans-serif;
+        color: ${stateColors.color};
+        border-color: ${stateColors.borderColor};
+        box-shadow: ${shadows2.inputs[1]} !important;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"} !important;
+    }
+
+    /* Increase specificity for focus states */
+    &.ant-input.ant-input:focus,
+    &.ant-input.ant-input:focus-visible,
+    &.ant-input.ant-input-focused {
+      outline: none !important;
+      border-color: ${colors2[type4].focussed.borderColor} !important;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
+    }
+
+    &.ant-input-outlined {
+      border: 1px solid ${stateColors.borderColor};
+
+      &:hover {
+        border-color: ${stateColors.borderColor};
+      }
+    }
+
+    .ant-input-group & {
+      &:focus-within {
+        outline: none;
+        color: ${stateColors.color};
+        box-shadow: none;
+        border-color: ${colors2[type4].focussed.borderColor};
+      }
+    }
+
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+
+      /* Hide focus styles on inner input when parent is focused */
+      .ant-input:focus-within {
+        box-shadow: none;
+        border-radius: 0;
+        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
+        border-color: #ddd;
+      }
+    }
+
+    /* Remove inner input focus styles when in a group */
+    .ant-input-group .ant-input:focus,
+    .ant-input-group .ant-input:focus-visible,
+    .ant-input-group .ant-input:focus-within {
+      outline: none;
+      box-shadow: none;
+      border-color: ${colors2[type4].focussed.borderColor};
+    }
+
+    /* Single focus ring on group */
+    .ant-input-group:focus-within {
+      outline: none;
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    /* Remove focus styles for standalone inputs */
+    &:not(.ant-input-group):focus-visible {
+      outline: none;
+      color: ${stateColors.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      border-color: ${colors2[type4].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &:not(.ant-input-group .ant-input):focus-visible {
+      outline: none;
+      color: ${stateColors.color};
+      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
+      border-radius: ${borderRadius2.BorderRadiusMd}px;
+      border-color: ${colors2[type4].focussed.borderColor};
+      transition: box-shadow 0.2s ease-in-out;
+    }
+
+    &.ant-input-group-wrapper {
+      .ant-input-group {
+        display: flex;
+        align-items: center;
+        height: ${size === "normal" || size === "large" ? "40px" : "32px"};
+
+        .ant-input {
+          height: 100% !important;
+        }
+
+        .ant-input-group-addon {
+          padding: 0 ${components2.input.suffixPrefixHorPadding};
+          height: 100%;
+          display: flex;
+          align-items: center;
+          min-width: fit-content;
+          width: auto;
+          
+          > * {
+            width: 100%;
+          }
+          
+          .ant-select {
+            height: 100%;
+            
+            .ant-select-selector {
+              height: 100%;
+              display: flex;
+              align-items: center;
+            }
+          }
+        }
+      }
+    }
+  `;
+};
+const Input$1 = styled(Input$2)`
+  ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
+  const hasBeforeAddon = !!rest.addonBefore;
+  const hasAfterAddon = !!rest.addonAfter;
+  return getGenesisInputClass(
+    theme,
+    type4,
+    state,
+    hasBeforeAddon,
+    hasAfterAddon,
+    size
+  );
+}}
+`;
+const DropdownChevron = (properties) => {
+  const { theme } = useGenesis();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 20,
+      height: 20,
+      fill: "none",
+      ...properties,
+      children: /* @__PURE__ */ jsxRuntime.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"
+        }
+      )
+    }
+  );
+};
+const Input2 = ({
+  state = STATE.active,
+  size = "normal",
+  onChange,
+  value: value2,
+  ...rest
+}) => {
+  const { type: type4, ...validRest } = rest;
+  const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React.cloneElement(rest.addonAfter, {
+    suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {})
+  }) : rest.addonAfter;
+  const handleChange = React.useCallback(
+    (e2) => {
+      if (onChange) {
+        onChange({
+          event: "inputChange",
+          payload: {
+            value: e2.target.value
+          }
+        });
+      }
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Input$1,
+    {
+      ...validRest,
+      size,
+      state,
+      disabled: state === "disabled" || rest.disabled,
+      addonAfter,
+      style: {
+        height: size === "normal" || size === "large" ? "40px" : "32px"
+      },
+      onChange: handleChange,
+      value: value2
+    }
+  );
+};
+const getVariant = (typography2, variant, breakpoint) => {
+  return `
+        font-size: ${typography2[breakpoint][variant].fontSize}px !important;
+        line-height: ${typography2[breakpoint][variant].lineHeight};
+        letter-spacing: ${typography2[breakpoint][variant].letterSpacing}px;
+        font-weight: ${typography2[breakpoint][variant].fontWeight};
+      `;
+};
+const getColor = (color2, colors2, $themeType) => {
+  if (color2) {
+    return color2;
+  }
+  return colors2[$themeType].active.color;
+};
+const getFontFamily = (variant) => {
+  return `
+    ${variant.includes("digits") ? "'Roboto Mono', sans-serif" : "'Inter', sans-serif"} !important;
+  `;
+};
+const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, $isFullWidth) => `
+    &.ant-typography {
+      font-family: ${getFontFamily(variant)};
+      color: ${getColor(color2, colors2, $themeType)} !important;
+      ${getVariant(typography2, variant, breakpoint)}
+      margin-bottom: 0 !important;
+      width: ${$isFullWidth ? "100%" : "auto"};
+      line-height: 1;
+
+      &:disabled {
+        color: ${colors2.status.disabled.default} !important;
+        userSelect: none;
+        cursor: not-allowed;
+      }
+    } 
+`;
+const Headline = styled(Typography$1.Title)`
+  ${({
+  theme,
+  $themeType,
+  variant,
+  state,
+  breakpoint,
+  color: color2,
+  $isFullWidth
+}) => {
+  return getGenesisTypographyClass(
+    theme,
+    $themeType,
+    variant,
+    state,
+    breakpoint,
+    color2,
+    $isFullWidth
+  );
+}}
+`;
+const Paragraph = styled(
+  Typography$1.Paragraph
+)`
+  ${({
+  theme,
+  $themeType,
+  variant,
+  state,
+  breakpoint,
+  color: color2,
+  $isFullWidth
+}) => {
+  return getGenesisTypographyClass(
+    theme,
+    $themeType,
+    variant,
+    state,
+    breakpoint,
+    color2,
+    $isFullWidth
+  );
+}}
+`;
+const Text = styled(Typography$1.Text)`
+  ${({
+  theme,
+  $themeType,
+  variant,
+  state,
+  breakpoint,
+  color: color2,
+  $isFullWidth
+}) => {
+  return getGenesisTypographyClass(
+    theme,
+    $themeType,
+    variant,
+    state,
+    breakpoint,
+    color2,
+    $isFullWidth
+  );
+}}
+`;
+const Typography = ({
+  children,
+  themeType = TYPE.secondary,
+  variant = TYPOGRAPHY_VARIANT.body1,
+  state = STATE.active,
+  color: color2,
+  isText = false,
+  isFullWidth,
+  style: style2,
+  isDisabled,
+  ...rest
+}) => {
+  const { breakpoint } = useGenesis();
+  if (variant.startsWith("display") || variant.startsWith("heading")) {
+    const level = variant.split("heading")[1] || variant.split("display")[1];
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Headline,
+      {
+        state,
+        $themeType: themeType,
+        variant,
+        breakpoint,
+        color: color2,
+        level: Number.parseInt(level),
+        $isFullWidth: isFullWidth,
+        style: style2,
+        disabled: isDisabled,
+        ...rest,
+        children
+      }
+    );
+  }
+  if (isText) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Text,
+      {
+        state,
+        $themeType: themeType,
+        variant,
+        breakpoint,
+        color: color2,
+        $isFullWidth: isFullWidth,
+        style: style2,
+        disabled: isDisabled,
+        ...rest,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Paragraph,
+    {
+      state,
+      $themeType: themeType,
+      variant,
+      breakpoint,
+      color: color2,
+      $isFullWidth: isFullWidth,
+      style: style2,
+      disabled: isDisabled,
+      ...rest,
+      children
+    }
+  );
+};
 const ChatContainer = styled.div`
   display: flex;
   flex-direction: column;
@@ -75300,305 +75709,61 @@ const Form$1 = styled(Form$2)`
 const FormItem = Form$1.Item;
 const Form2 = Object.assign(
   ({ children, ...properties }) => {
-    const { breakpoint } = useGenesis();
-    return /* @__PURE__ */ jsxRuntime.jsx(Form$1, { role: "form", ...properties, children });
-  },
-  {
-    Item: FormItem,
-    useForm: Form$1.useForm
-  }
-);
-const Outline = (properties) => /* @__PURE__ */ jsxRuntime.jsxs(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    ...properties,
-    children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fill: "#101010",
-          d: "M12.6 15.383a2.47 2.47 0 0 1 .18-.926c.054-.139.123-.278.207-.419.086-.143.173-.272.261-.39.09-.119.194-.24.314-.366.119-.127.231-.24.336-.34a17.157 17.157 0 0 1 1.087-.9c.034-.024.059-.044.076-.058.317-.246.552-.522.707-.829.154-.306.231-.616.231-.928 0-.413-.11-.73-.331-.953-.219-.224-.538-.336-.958-.336-.184 0-.372.043-.566.131a1.404 1.404 0 0 0-.48.346.89.89 0 0 1 .577.31.9.9 0 0 1 .235.619c0 .26-.092.481-.276.665a.901.901 0 0 1-.662.272.922.922 0 0 1-.84-.521 1.49 1.49 0 0 1-.177-.71c0-.204.04-.406.118-.606.078-.199.194-.384.348-.556.155-.174.337-.327.548-.46.211-.133.458-.238.741-.314.284-.076.584-.114.903-.114.396 0 .755.04 1.075.12.322.078.59.185.803.32.213.132.39.29.533.474.142.182.245.372.308.571.062.198.093.406.093.624 0 .213-.023.414-.07.604a2.076 2.076 0 0 1-.463.908 2.718 2.718 0 0 1-.346.343 5.695 5.695 0 0 1-.392.296 8.39 8.39 0 0 1-.407.266c-.125.075-.262.16-.41.255-.147.094-.271.18-.373.258a9.965 9.965 0 0 1-.369.264 34.1 34.1 0 0 0-.334.234c-.08.057-.17.133-.272.229-.1.095-.19.2-.273.313.223-.068.444-.102.662-.102h1.524a.307.307 0 0 0 .22-.094.617.617 0 0 0 .146-.246c.035-.1.06-.2.076-.302.018-.102.026-.2.026-.296v-.469h1.055v2.813h-5.39ZM7.418 9.611 7.216 11.1c.326-.102.68-.18 1.063-.232.385-.055.715-.082.99-.082.374 0 .702.058.985.173.283.113.513.275.688.486.176.211.308.46.396.747.088.285.132.607.132.964a2.168 2.168 0 0 1-.404 1.28c-.143.208-.32.39-.53.545a2.6 2.6 0 0 1-.804.375 3.77 3.77 0 0 1-1.075.144 3.46 3.46 0 0 1-.902-.114 2.57 2.57 0 0 1-1.29-.77 1.869 1.869 0 0 1-.348-.56A1.649 1.649 0 0 1 6 13.449c0-.252.059-.488.176-.709a.915.915 0 0 1 .343-.378.909.909 0 0 1 .498-.143c.26 0 .48.091.662.275a.897.897 0 0 1 .275.662.911.911 0 0 1-.234.621.895.895 0 0 1-.577.308c.128.144.289.26.48.349.193.086.382.129.565.129.42 0 .74-.112.958-.335.221-.224.332-.543.332-.955 0-.529-.11-.907-.332-1.133-.22-.227-.6-.34-1.136-.34-.242 0-.534.022-.876.067l-.938-.234.041-.024.48-3.492h.886c.039.01.14.037.301.082.164.043.279.072.343.085a5.676 5.676 0 0 0 .879.067c.824 0 1.527-.078 2.11-.234l.116.352a2.005 2.005 0 0 1-.36.662 1.748 1.748 0 0 1-.539.44 2.544 2.544 0 0 1-.63.23 3.194 3.194 0 0 1-.697.074c-.76 0-1.33-.088-1.708-.264Z"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        "path",
-        {
-          fill: "#101010",
-          fillRule: "evenodd",
-          d: "M19 6H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1ZM5 4a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z",
-          clipRule: "evenodd"
-        }
-      )
-    ]
-  }
-);
-const Solid = (properties) => /* @__PURE__ */ jsxRuntime.jsx(
-  "svg",
-  {
-    xmlns: "http://www.w3.org/2000/svg",
-    width: 24,
-    height: 24,
-    fill: "none",
-    ...properties,
-    children: /* @__PURE__ */ jsxRuntime.jsx(
-      "path",
-      {
-        fill: "#101010",
-        d: "M19 4a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h14ZM6.718 8.117l-.48 3.492-.042.024.938.234c.342-.045.634-.067.876-.067.537 0 .916.113 1.136.34.221.226.332.604.332 1.133 0 .412-.11.73-.332.956-.218.222-.538.334-.958.334-.183 0-.372-.043-.565-.13a1.438 1.438 0 0 1-.48-.348.895.895 0 0 0 .577-.308.911.911 0 0 0 .234-.62c0-.26-.092-.481-.275-.663a.896.896 0 0 0-.662-.275.909.909 0 0 0-.498.143.915.915 0 0 0-.343.378 1.49 1.49 0 0 0-.176.71c0 .204.04.406.117.606.078.199.195.385.349.56a2.57 2.57 0 0 0 1.289.77c.283.076.584.114.902.114a3.77 3.77 0 0 0 1.075-.144 2.6 2.6 0 0 0 .803-.375c.211-.156.388-.337.53-.544a2.168 2.168 0 0 0 .405-1.28c0-.358-.044-.68-.132-.965a2.122 2.122 0 0 0-.396-.747 1.697 1.697 0 0 0-.688-.486 2.598 2.598 0 0 0-.984-.173c-.276 0-.606.027-.99.082-.384.053-.738.13-1.064.232l.202-1.489c.379.176.948.264 1.708.264.246 0 .478-.024.697-.073.219-.05.429-.126.63-.232.203-.105.383-.252.54-.44.155-.187.276-.407.36-.661l-.118-.352c-.582.156-1.285.235-2.109.235a5.676 5.676 0 0 1-.879-.068 8.84 8.84 0 0 1-.343-.085 17.89 17.89 0 0 0-.301-.082h-.885ZM15.178 8c-.318 0-.618.038-.902.114-.283.076-.53.18-.74.314a2.526 2.526 0 0 0-.549.46c-.154.172-.27.357-.348.556-.079.2-.117.402-.117.607 0 .252.058.488.175.709a.933.933 0 0 0 .841.521c.26 0 .48-.09.662-.272a.906.906 0 0 0 .276-.665.9.9 0 0 0-.235-.618.89.89 0 0 0-.577-.311c.129-.144.29-.26.48-.346.194-.088.382-.132.566-.132.42 0 .74.113.958.337.22.223.331.54.331.953 0 .312-.077.622-.231.928-.155.307-.39.583-.707.83l-.076.058c-.134.104-.255.197-.36.281a17.157 17.157 0 0 0-.727.618c-.105.1-.217.213-.336.34a4.22 4.22 0 0 0-.314.366 4.665 4.665 0 0 0-.26.39 2.753 2.753 0 0 0-.34.864 2.47 2.47 0 0 0-.047.48h5.39V12.57h-1.055v.47c0 .095-.008.193-.026.295a1.678 1.678 0 0 1-.076.302.617.617 0 0 1-.146.246.307.307 0 0 1-.22.094h-1.524c-.218 0-.44.034-.662.102.082-.113.173-.218.273-.313.101-.096.192-.172.272-.229a34.1 34.1 0 0 1 .334-.234c.143-.098.266-.186.37-.264.1-.078.225-.164.371-.258.149-.096.286-.18.41-.255a8.39 8.39 0 0 0 .408-.266c.146-.102.277-.2.392-.296.118-.096.233-.21.346-.343a2.076 2.076 0 0 0 .463-.908c.047-.19.07-.39.07-.604 0-.218-.031-.426-.093-.624-.063-.199-.166-.39-.308-.57a2.02 2.02 0 0 0-.533-.476 2.676 2.676 0 0 0-.803-.319c-.32-.08-.679-.12-1.075-.12Z"
-      }
-    )
-  }
-);
-const UnitNumber = ({ variant }) => {
-  return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(Outline, {}) : /* @__PURE__ */ jsxRuntime.jsx(Solid, {});
-};
-const getStateColors = (colors2, type4, state) => {
-  const filled = {
-    color: colors2.inputs.onsurface.active,
-    borderColor: colors2[TYPE.secondary].active.borderColor,
-    ringColor: colors2[type4].focussed.ringColor
-  };
-  const success = {
-    color: colors2.status.success.default,
-    borderColor: colors2.status.success.default,
-    ringColor: colors2.status.success.ringColor
-  };
-  const error2 = {
-    color: colors2.status.error.default,
-    borderColor: colors2.status.error.default,
-    ringColor: colors2.status.error.ringColor
-  };
-  const themeState = state !== STATE.error && state !== STATE.success && state !== STATE.filled ? {
-    color: colors2.inputs.onsurface.active,
-    backgroundColor: colors2.inputs.surface.active,
-    borderColor: colors2.inputs.surface.border,
-    ringColor: colors2[type4][state].ringColor
-  } : null;
-  const stateMap = {
-    filled,
-    error: error2,
-    success,
-    themeState
-  };
-  const getValidKey = (state2) => {
-    const validStates = [STATE.filled, STATE.error, STATE.success];
-    return validStates.includes(state2) ? state2 : "themeState";
-  };
-  const css = stateMap[getValidKey(state)];
-  return css;
-};
-const getGenesisInputClass = ({ colors: colors2, borderRadius: borderRadius2, components: components2, shadows: shadows2 }, type4, state, hasBeforeAddon, hasAfterAddon, size) => {
-  const stateColors = getStateColors(colors2, type4, state);
-  const getBorderRadius = (hasBeforeAddon2, hasAfterAddon2) => {
-    if (hasAfterAddon2 && !hasBeforeAddon2) {
-      return `${borderRadius2.BorderRadiusMd}px 0px 0px ${borderRadius2.BorderRadiusMd}px`;
-    }
-    if (hasBeforeAddon2 && !hasAfterAddon2) {
-      return `0px ${borderRadius2.BorderRadiusMd}px ${borderRadius2.BorderRadiusMd}px 0px`;
-    }
-    return `0px`;
-  };
-  return `
-    &.ant-input {
-        font-family: 'Inter', sans-serif;
-        color: ${stateColors.color};
-        border-color: ${stateColors.borderColor};
-        box-shadow: ${shadows2.inputs[1]} !important;
-        height: ${size === "normal" || size === "large" ? "40px" : "32px"} !important;
-    }
-
-    /* Increase specificity for focus states */
-    &.ant-input.ant-input:focus,
-    &.ant-input.ant-input:focus-visible,
-    &.ant-input.ant-input-focused {
-      outline: none !important;
-      border-color: ${colors2[type4].focussed.borderColor} !important;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor} !important;
-    }
-
-    &.ant-input-outlined {
-      border: 1px solid ${stateColors.borderColor};
-
-      &:hover {
-        border-color: ${stateColors.borderColor};
-      }
-    }
-
-    .ant-input-group & {
-      &:focus-within {
-        outline: none;
-        color: ${stateColors.color};
-        box-shadow: none;
-        border-color: ${colors2[type4].focussed.borderColor};
-      }
-    }
-
-    .ant-input-group:focus-within {
-      outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
-      border-radius: ${borderRadius2.BorderRadiusMd}px;
-      transition: box-shadow 0.2s ease-in-out;
-
-      /* Hide focus styles on inner input when parent is focused */
-      .ant-input:focus-within {
-        box-shadow: none;
-        border-radius: 0;
-        border-radius: ${getBorderRadius(hasBeforeAddon, hasAfterAddon)};
-        border-color: #ddd;
-      }
-    }
-
-    /* Remove inner input focus styles when in a group */
-    .ant-input-group .ant-input:focus,
-    .ant-input-group .ant-input:focus-visible,
-    .ant-input-group .ant-input:focus-within {
-      outline: none;
-      box-shadow: none;
-      border-color: ${colors2[type4].focussed.borderColor};
-    }
-
-    /* Single focus ring on group */
-    .ant-input-group:focus-within {
-      outline: none;
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
-      border-radius: ${borderRadius2.BorderRadiusMd}px;
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    /* Remove focus styles for standalone inputs */
-    &:not(.ant-input-group):focus-visible {
-      outline: none;
-      color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
-      border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[type4].focussed.borderColor};
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    &:not(.ant-input-group .ant-input):focus-visible {
-      outline: none;
-      color: ${stateColors.color};
-      box-shadow: 0 0 0 1px #fff, 0 0 0 3px ${colors2[type4].focussed.ringColor};
-      border-radius: ${borderRadius2.BorderRadiusMd}px;
-      border-color: ${colors2[type4].focussed.borderColor};
-      transition: box-shadow 0.2s ease-in-out;
-    }
-
-    &.ant-input-group-wrapper {
-      .ant-input-group {
-        display: flex;
-        align-items: center;
-        height: ${size === "normal" || size === "large" ? "40px" : "32px"};
-
-        .ant-input {
-          height: 100% !important;
-        }
-
-        .ant-input-group-addon {
-          padding: 0 ${components2.input.suffixPrefixHorPadding};
-          height: 100%;
-          display: flex;
-          align-items: center;
-          min-width: fit-content;
-          width: auto;
-          
-          > * {
-            width: 100%;
-          }
-          
-          .ant-select {
-            height: 100%;
-            
-            .ant-select-selector {
-              height: 100%;
-              display: flex;
-              align-items: center;
-            }
-          }
-        }
-      }
-    }
-  `;
-};
-const Input$1 = styled(Input$2)`
-  ${({ theme, state, type: type4 = TYPE.primary, size = "normal", ...rest }) => {
-  const hasBeforeAddon = !!rest.addonBefore;
-  const hasAfterAddon = !!rest.addonAfter;
-  return getGenesisInputClass(
-    theme,
-    type4,
-    state,
-    hasBeforeAddon,
-    hasAfterAddon,
-    size
-  );
-}}
-`;
-const DropdownChevron = (properties) => {
-  const { theme } = useGenesis();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "svg",
-    {
-      xmlns: "http://www.w3.org/2000/svg",
-      width: 20,
-      height: 20,
-      fill: "none",
-      ...properties,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
+    const { breakpoint } = useGenesis();
+    return /* @__PURE__ */ jsxRuntime.jsx(Form$1, { role: "form", ...properties, children });
+  },
+  {
+    Item: FormItem,
+    useForm: Form$1.useForm
+  }
+);
+const Outline = (properties) => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    ...properties,
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
         "path",
         {
-          fill: "#222",
+          fill: "#101010",
+          d: "M12.6 15.383a2.47 2.47 0 0 1 .18-.926c.054-.139.123-.278.207-.419.086-.143.173-.272.261-.39.09-.119.194-.24.314-.366.119-.127.231-.24.336-.34a17.157 17.157 0 0 1 1.087-.9c.034-.024.059-.044.076-.058.317-.246.552-.522.707-.829.154-.306.231-.616.231-.928 0-.413-.11-.73-.331-.953-.219-.224-.538-.336-.958-.336-.184 0-.372.043-.566.131a1.404 1.404 0 0 0-.48.346.89.89 0 0 1 .577.31.9.9 0 0 1 .235.619c0 .26-.092.481-.276.665a.901.901 0 0 1-.662.272.922.922 0 0 1-.84-.521 1.49 1.49 0 0 1-.177-.71c0-.204.04-.406.118-.606.078-.199.194-.384.348-.556.155-.174.337-.327.548-.46.211-.133.458-.238.741-.314.284-.076.584-.114.903-.114.396 0 .755.04 1.075.12.322.078.59.185.803.32.213.132.39.29.533.474.142.182.245.372.308.571.062.198.093.406.093.624 0 .213-.023.414-.07.604a2.076 2.076 0 0 1-.463.908 2.718 2.718 0 0 1-.346.343 5.695 5.695 0 0 1-.392.296 8.39 8.39 0 0 1-.407.266c-.125.075-.262.16-.41.255-.147.094-.271.18-.373.258a9.965 9.965 0 0 1-.369.264 34.1 34.1 0 0 0-.334.234c-.08.057-.17.133-.272.229-.1.095-.19.2-.273.313.223-.068.444-.102.662-.102h1.524a.307.307 0 0 0 .22-.094.617.617 0 0 0 .146-.246c.035-.1.06-.2.076-.302.018-.102.026-.2.026-.296v-.469h1.055v2.813h-5.39ZM7.418 9.611 7.216 11.1c.326-.102.68-.18 1.063-.232.385-.055.715-.082.99-.082.374 0 .702.058.985.173.283.113.513.275.688.486.176.211.308.46.396.747.088.285.132.607.132.964a2.168 2.168 0 0 1-.404 1.28c-.143.208-.32.39-.53.545a2.6 2.6 0 0 1-.804.375 3.77 3.77 0 0 1-1.075.144 3.46 3.46 0 0 1-.902-.114 2.57 2.57 0 0 1-1.29-.77 1.869 1.869 0 0 1-.348-.56A1.649 1.649 0 0 1 6 13.449c0-.252.059-.488.176-.709a.915.915 0 0 1 .343-.378.909.909 0 0 1 .498-.143c.26 0 .48.091.662.275a.897.897 0 0 1 .275.662.911.911 0 0 1-.234.621.895.895 0 0 1-.577.308c.128.144.289.26.48.349.193.086.382.129.565.129.42 0 .74-.112.958-.335.221-.224.332-.543.332-.955 0-.529-.11-.907-.332-1.133-.22-.227-.6-.34-1.136-.34-.242 0-.534.022-.876.067l-.938-.234.041-.024.48-3.492h.886c.039.01.14.037.301.082.164.043.279.072.343.085a5.676 5.676 0 0 0 .879.067c.824 0 1.527-.078 2.11-.234l.116.352a2.005 2.005 0 0 1-.36.662 1.748 1.748 0 0 1-.539.44 2.544 2.544 0 0 1-.63.23 3.194 3.194 0 0 1-.697.074c-.76 0-1.33-.088-1.708-.264Z"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          fill: "#101010",
           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",
+          d: "M19 6H5a1 1 0 0 0-1 1v9a1 1 0 0 0 1 1h14a1 1 0 0 0 1-1V7a1 1 0 0 0-1-1ZM5 4a3 3 0 0 0-3 3v9a3 3 0 0 0 3 3h14a3 3 0 0 0 3-3V7a3 3 0 0 0-3-3H5Z",
           clipRule: "evenodd"
         }
       )
-    }
-  );
-};
-const Input2 = ({
-  state = STATE.active,
-  size = "normal",
-  onChange,
-  value: value2,
-  ...rest
-}) => {
-  const { type: type4, ...validRest } = rest;
-  const addonAfter = React.isValidElement(rest.addonAfter) && rest.addonAfter.type === Select$1 ? React.cloneElement(rest.addonAfter, {
-    suffixIcon: /* @__PURE__ */ jsxRuntime.jsx(DropdownChevron, {})
-  }) : rest.addonAfter;
-  const handleChange = React.useCallback(
-    (e2) => {
-      if (onChange) {
-        onChange({
-          event: "inputChange",
-          payload: {
-            value: e2.target.value
-          }
-        });
+    ]
+  }
+);
+const Solid = (properties) => /* @__PURE__ */ jsxRuntime.jsx(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 24,
+    height: 24,
+    fill: "none",
+    ...properties,
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      "path",
+      {
+        fill: "#101010",
+        d: "M19 4a3 3 0 0 1 3 3v9a3 3 0 0 1-3 3H5a3 3 0 0 1-3-3V7a3 3 0 0 1 3-3h14ZM6.718 8.117l-.48 3.492-.042.024.938.234c.342-.045.634-.067.876-.067.537 0 .916.113 1.136.34.221.226.332.604.332 1.133 0 .412-.11.73-.332.956-.218.222-.538.334-.958.334-.183 0-.372-.043-.565-.13a1.438 1.438 0 0 1-.48-.348.895.895 0 0 0 .577-.308.911.911 0 0 0 .234-.62c0-.26-.092-.481-.275-.663a.896.896 0 0 0-.662-.275.909.909 0 0 0-.498.143.915.915 0 0 0-.343.378 1.49 1.49 0 0 0-.176.71c0 .204.04.406.117.606.078.199.195.385.349.56a2.57 2.57 0 0 0 1.289.77c.283.076.584.114.902.114a3.77 3.77 0 0 0 1.075-.144 2.6 2.6 0 0 0 .803-.375c.211-.156.388-.337.53-.544a2.168 2.168 0 0 0 .405-1.28c0-.358-.044-.68-.132-.965a2.122 2.122 0 0 0-.396-.747 1.697 1.697 0 0 0-.688-.486 2.598 2.598 0 0 0-.984-.173c-.276 0-.606.027-.99.082-.384.053-.738.13-1.064.232l.202-1.489c.379.176.948.264 1.708.264.246 0 .478-.024.697-.073.219-.05.429-.126.63-.232.203-.105.383-.252.54-.44.155-.187.276-.407.36-.661l-.118-.352c-.582.156-1.285.235-2.109.235a5.676 5.676 0 0 1-.879-.068 8.84 8.84 0 0 1-.343-.085 17.89 17.89 0 0 0-.301-.082h-.885ZM15.178 8c-.318 0-.618.038-.902.114-.283.076-.53.18-.74.314a2.526 2.526 0 0 0-.549.46c-.154.172-.27.357-.348.556-.079.2-.117.402-.117.607 0 .252.058.488.175.709a.933.933 0 0 0 .841.521c.26 0 .48-.09.662-.272a.906.906 0 0 0 .276-.665.9.9 0 0 0-.235-.618.89.89 0 0 0-.577-.311c.129-.144.29-.26.48-.346.194-.088.382-.132.566-.132.42 0 .74.113.958.337.22.223.331.54.331.953 0 .312-.077.622-.231.928-.155.307-.39.583-.707.83l-.076.058c-.134.104-.255.197-.36.281a17.157 17.157 0 0 0-.727.618c-.105.1-.217.213-.336.34a4.22 4.22 0 0 0-.314.366 4.665 4.665 0 0 0-.26.39 2.753 2.753 0 0 0-.34.864 2.47 2.47 0 0 0-.047.48h5.39V12.57h-1.055v.47c0 .095-.008.193-.026.295a1.678 1.678 0 0 1-.076.302.617.617 0 0 1-.146.246.307.307 0 0 1-.22.094h-1.524c-.218 0-.44.034-.662.102.082-.113.173-.218.273-.313.101-.096.192-.172.272-.229a34.1 34.1 0 0 1 .334-.234c.143-.098.266-.186.37-.264.1-.078.225-.164.371-.258.149-.096.286-.18.41-.255a8.39 8.39 0 0 0 .408-.266c.146-.102.277-.2.392-.296.118-.096.233-.21.346-.343a2.076 2.076 0 0 0 .463-.908c.047-.19.07-.39.07-.604 0-.218-.031-.426-.093-.624-.063-.199-.166-.39-.308-.57a2.02 2.02 0 0 0-.533-.476 2.676 2.676 0 0 0-.803-.319c-.32-.08-.679-.12-1.075-.12Z"
       }
-    },
-    [onChange]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Input$1,
-    {
-      ...validRest,
-      size,
-      state,
-      disabled: state === "disabled" || rest.disabled,
-      addonAfter,
-      style: {
-        height: size === "normal" || size === "large" ? "40px" : "32px"
-      },
-      onChange: handleChange,
-      value: value2
-    }
-  );
+    )
+  }
+);
+const UnitNumber = ({ variant }) => {
+  return variant === "outline" ? /* @__PURE__ */ jsxRuntime.jsx(Outline, {}) : /* @__PURE__ */ jsxRuntime.jsx(Solid, {});
 };
 function r(e2) {
   var t2, f, n2 = "";
@@ -79012,171 +79177,6 @@ const Table$1 = styled(ForwardTable)`
   return getGenesisClass$3(theme, $isMainContentCell);
 }}
 `;
-const getVariant = (typography2, variant, breakpoint) => {
-  return `
-        font-size: ${typography2[breakpoint][variant].fontSize}px !important;
-        line-height: ${typography2[breakpoint][variant].lineHeight};
-        letter-spacing: ${typography2[breakpoint][variant].letterSpacing}px;
-        font-weight: ${typography2[breakpoint][variant].fontWeight};
-      `;
-};
-const getColor = (color2, colors2, $themeType) => {
-  if (color2) {
-    return color2;
-  }
-  return colors2[$themeType].active.color;
-};
-const getFontFamily = (variant) => {
-  return `
-    ${variant.includes("digits") ? "'Roboto Mono', sans-serif" : "'Inter', sans-serif"} !important;
-  `;
-};
-const getGenesisTypographyClass = ({ colors: colors2, typography: typography2 }, $themeType, variant, state, breakpoint, color2, $isFullWidth) => `
-    &.ant-typography {
-      font-family: ${getFontFamily(variant)};
-      color: ${getColor(color2, colors2, $themeType)} !important;
-      ${getVariant(typography2, variant, breakpoint)}
-      margin-bottom: 0 !important;
-      width: ${$isFullWidth ? "100%" : "auto"};
-      line-height: 1;
-
-      &:disabled {
-        color: ${colors2.status.disabled.default} !important;
-        userSelect: none;
-        cursor: not-allowed;
-      }
-    } 
-`;
-const Headline = styled(Typography$1.Title)`
-  ${({
-  theme,
-  $themeType,
-  variant,
-  state,
-  breakpoint,
-  color: color2,
-  $isFullWidth
-}) => {
-  return getGenesisTypographyClass(
-    theme,
-    $themeType,
-    variant,
-    state,
-    breakpoint,
-    color2,
-    $isFullWidth
-  );
-}}
-`;
-const Paragraph = styled(
-  Typography$1.Paragraph
-)`
-  ${({
-  theme,
-  $themeType,
-  variant,
-  state,
-  breakpoint,
-  color: color2,
-  $isFullWidth
-}) => {
-  return getGenesisTypographyClass(
-    theme,
-    $themeType,
-    variant,
-    state,
-    breakpoint,
-    color2,
-    $isFullWidth
-  );
-}}
-`;
-const Text = styled(Typography$1.Text)`
-  ${({
-  theme,
-  $themeType,
-  variant,
-  state,
-  breakpoint,
-  color: color2,
-  $isFullWidth
-}) => {
-  return getGenesisTypographyClass(
-    theme,
-    $themeType,
-    variant,
-    state,
-    breakpoint,
-    color2,
-    $isFullWidth
-  );
-}}
-`;
-const Typography = ({
-  children,
-  themeType = TYPE.secondary,
-  variant = TYPOGRAPHY_VARIANT.body1,
-  state = STATE.active,
-  color: color2,
-  isText = false,
-  isFullWidth,
-  style: style2,
-  isDisabled,
-  ...rest
-}) => {
-  const { breakpoint } = useGenesis();
-  if (variant.startsWith("display") || variant.startsWith("heading")) {
-    const level = variant.split("heading")[1] || variant.split("display")[1];
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Headline,
-      {
-        state,
-        $themeType: themeType,
-        variant,
-        breakpoint,
-        color: color2,
-        level: Number.parseInt(level),
-        $isFullWidth: isFullWidth,
-        style: style2,
-        disabled: isDisabled,
-        ...rest,
-        children
-      }
-    );
-  }
-  if (isText) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      Text,
-      {
-        state,
-        $themeType: themeType,
-        variant,
-        breakpoint,
-        color: color2,
-        $isFullWidth: isFullWidth,
-        style: style2,
-        disabled: isDisabled,
-        ...rest,
-        children
-      }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Paragraph,
-    {
-      state,
-      $themeType: themeType,
-      variant,
-      breakpoint,
-      color: color2,
-      $isFullWidth: isFullWidth,
-      style: style2,
-      disabled: isDisabled,
-      ...rest,
-      children
-    }
-  );
-};
 const NumberButton = styled.button`
   background: ${({ $active, theme }) => $active ? theme.colors.primary.default.backgroundColor : "transparent"};
   color: ${({ $active, theme }) => $active ? "#fff" : theme.colors.onsurface["copy-light"] || "#6C6C6C"};