@fibery/ui-kit 1.40.3 → 1.41.0

package/src/unit/styles.ts

@@ -8,7 +8,7 @@ export const textEllipsisClassName = css`
 `;
 
 export const basicUnitClassName = css`
-  border-radius: ${space.s4 + space.s1}px;
+  border-radius: ${space.s6}px;
   border: none;
 `;
 
@@ -62,7 +62,6 @@ export const unitWithTitleClassName = css`
 `;
 
 export const invalidUnitClassName = css``;
-export const invalidUnitClassNameInForm = css``;
 
 export const clickableClassName = css`
   cursor: pointer;
@@ -84,7 +83,7 @@ export const borderClassName = css`
     bottom: 0;
     box-shadow: ${themeVars.inputBorderColor} inset;
     mix-blend-mode: ${themeVars.inputBorderBlendMode};
-    border-radius: ${space.s4 + space.s1}px;
+    border-radius: ${space.s6}px;
     pointer-events: none;
   }
 
@@ -97,14 +96,6 @@ export const borderClassName = css`
   }
 
   &.${invalidUnitClassName} {
-    padding-left: 20px;
-    &:has(button) {
-      padding-left: 0;
-    }
-    & button {
-      padding-left: 20px;
-    }
-
     &::before {
       box-shadow: none;
       border: 1px solid ${themeVars.colorBorderButtonOutlineAccentDefault};
@@ -119,20 +110,6 @@ export const borderClassName = css`
       box-shadow: ${themeVars.inputBorderFocusColor} inset;
       border: none;
     }
-    &::after {
-      content: "";
-      position: absolute;
-      top: 0;
-      width: 20px;
-      left: 4px;
-      right: 0;
-      bottom: 0;
-      background-image: url("./required-indicator.svg");
-      background-repeat: no-repeat;
-      background-size: 16px 16px;
-      background-position: center;
-      pointer-events: none;
-    }
   }
 `;
 

package/src/unit/unit-with-tooltip.tsx

@@ -13,9 +13,10 @@ type Props = {
   children: React.ReactElement;
   title: React.ReactNode;
   description: React.ReactNode;
+  hidden?: boolean;
 };
 
-export const UnitWithTooltip = ({children, title, description}: Props) => {
+export const UnitWithTooltip = ({children, title, description, hidden}: Props) => {
   const [shouldDisplayTooltip, setShouldDisplayTooltip] = useState(false);
   const unitElementRef = useRef<HTMLDivElement>(null);
   const isHoveredRef = useRef(false);
@@ -57,7 +58,7 @@ export const UnitWithTooltip = ({children, title, description}: Props) => {
 
   return (
     <Tooltip
-      visible={shouldDisplayTooltip}
+      visible={!hidden && shouldDisplayTooltip}
       content={
         <div className={contentCss}>
           <TooltipTitle>{title}</TooltipTitle>

package/src/use-is-phone.tsx

@@ -20,8 +20,13 @@ function isVerticalMobileBreakpointDisabled() {
   ) {
     return true;
   }
-  const urlParams = new URLSearchParams(window.location.search);
-  return urlParams.has("no-vertical-mobile-breakpoint");
+
+  if (globalThis.URLSearchParams) {
+    const urlParams = new URLSearchParams(window.location.search);
+    return urlParams.has("no-vertical-mobile-breakpoint");
+  } else {
+    return false;
+  }
 }
 
 export const isPhoneApp = () =>

package/src/use-long-press.tsx

@@ -3,7 +3,7 @@ import {$TSFixMe} from "./tsfixme";
 
 function on<T extends Window | Document | HTMLElement | EventTarget>(
   obj: T | null,
-  // eslint-disable-next-line @typescript-eslint/ban-types,@typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-function-type -- DOM API compatibility
   ...args: Parameters<T["addEventListener"]> | [string, Function | null, ...any]
 ): void {
   if (obj && obj.addEventListener) {
@@ -13,7 +13,7 @@ function on<T extends Window | Document | HTMLElement | EventTarget>(
 
 export function off<T extends Window | Document | HTMLElement | EventTarget>(
   obj: T | null,
-  // eslint-disable-next-line @typescript-eslint/ban-types,@typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-function-type -- DOM API compatibility
   ...args: Parameters<T["removeEventListener"]> | [string, Function | null, ...any]
 ): void {
   if (obj && obj.removeEventListener) {

package/src/use-on-screen-keyboard-data.tsx

@@ -1,6 +1,6 @@
 import {ReactNode, useEffect, useState} from "react";
 import {createContext} from "@fibery/react/src/create-context";
-import _ from "lodash";
+import noop from "lodash/noop";
 import {isPhoneApp} from "./use-is-phone";
 import {keyboardHeightVar, mobileKeyboardOpenClassName} from "./mobile-styles";
 
@@ -23,7 +23,7 @@ export function OnScreenKeyboardContextProvider({children}: {children: ReactNode
   useEffect(() => {
     const viewport = window.visualViewport;
     if (!viewport || !isPhoneApp()) {
-      return _.noop;
+      return noop;
     }
 
     function viewportHandler() {

package/src/with-data.tsx

@@ -1,4 +1,5 @@
-import _ from "lodash";
+import mapValues from "lodash/mapValues";
+import noop from "lodash/noop";
 import {PureComponent, ComponentType} from "react";
 import {asError} from "./errors";
 import {$TSFixMe} from "./tsfixme";
@@ -25,7 +26,7 @@ type ProvidedState = Record<string, FetchState>;
 export function provideData<T>({sources}: {sources: Record<string, () => Promise<$TSFixMe>>}) {
   return (Component: ComponentType<T & ProvidedState>) =>
     class DataProvider extends PureComponent<T, ProvidedState> {
-      state = _.mapValues(
+      state = mapValues(
         sources,
         (): FetchState => ({
           fetchState: ":fetch-state/start",
@@ -66,7 +67,7 @@ export function provideData<T>({sources}: {sources: Record<string, () => Promise
       }
 
       componentWillUnmount() {
-        this.setStateIfMounted = _.noop;
+        this.setStateIfMounted = noop;
       }
 
       render() {

package/src/workflow-progress-icon.tsx

@@ -1,6 +1,6 @@
 import {css} from "@linaria/core";
 import {arc} from "d3-shape";
-import _ from "lodash";
+import memoize from "lodash/memoize";
 import {FC} from "react";
 import {themeVars} from "./design-system";
 
@@ -52,7 +52,7 @@ export const WorkflowProgressIcon: FC<WorkflowProgressIcon> = ({
   );
 };
 
-const getPath = _.memoize(
+const getPath = memoize(
   (index, total, size) => {
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore bad d3-shape typings

package/.eslintignore

@@ -1,3 +0,0 @@
-*.d.ts
-src/icons/react
-src/icons/ast

package/.eslintrc

@@ -1,14 +0,0 @@
-{
-  "extends": "@fibery/eslint-config",
-  "rules": {
-    "no-restricted-imports": ["error", {"patterns": ["@fibery/ui-kit/*"]}]
-  },
-  "overrides": [
-    {
-      "files": ["src/icons/*"],
-      "rules": {
-        "unicorn/filename-case": "off"
-      }
-    }
-  ]
-}

package/src/__mocks__/createInlineTheme.js

@@ -1,3 +0,0 @@
-export function createInlineTheme() {
-  return {};
-}

package/src/create-inline-theme.ts

@@ -1,66 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-export const varPrefix = process.env.VAR_THEME_PREFIX || "fibery";
-
-export function createInlineTheme<T extends Record<string, unknown>>(
-  themes: T,
-  rejectKeys: Array<string>
-): Record<string, string> {
-  return Object.entries(themes).reduce<Record<string, string>>((inlineTheme, [key, value]) => {
-    if (rejectKeys.includes(key)) {
-      return inlineTheme;
-    }
-
-    if (key === "opacity") {
-      Object.entries(themes.opacity as Record<string, string>).forEach(([opacityKey, opacityValue]) => {
-        inlineTheme[`--${varPrefix}-opacity-${opacityKey}`] = opacityValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "stateColors") {
-      Object.entries(themes.stateColors as Record<string, string>).forEach(([stateColorKey, stateColorValue]) => {
-        inlineTheme[`--${varPrefix}-state-colors-${stateColorKey}`] = stateColorValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "brandColors") {
-      Object.entries(themes.brandColors as Record<string, string>).forEach(([brandColorKey, brandColorValue]) => {
-        inlineTheme[`--${varPrefix}-brand-colors-${brandColorKey}`] = brandColorValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "shades") {
-      Object.entries(themes.shades as Record<string, string>).forEach(([shadeKey, shadeValue]) => {
-        inlineTheme[`--${varPrefix}-shades-${shadeKey}`] = shadeValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "lights") {
-      Object.entries(themes.lights as Record<string, string>).forEach(([lightKey, lightValue]) => {
-        inlineTheme[`--${varPrefix}-lights-${lightKey}`] = lightValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "separators") {
-      Object.entries(themes.separators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--${varPrefix}-separator-${separatorKey}`] = separatorValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    if (key === "inversedSeparators") {
-      Object.entries(themes.inversedSeparators as Record<string, string>).forEach(([separatorKey, separatorValue]) => {
-        inlineTheme[`--${varPrefix}-inversed-separators-${separatorKey}`] = separatorValue;
-      }, "");
-
-      return inlineTheme;
-    }
-    inlineTheme[`--${varPrefix}-color-${key}`] = value as string;
-    return inlineTheme;
-  }, {});
-}

package/src/number-input/index.js

@@ -1,191 +0,0 @@
-import _ from "lodash";
-import {bool, func, number, object, oneOf, oneOfType, string} from "prop-types";
-import {useCallback, useMemo, useState, useEffect} from "react";
-import {AntInputNumber} from "../antd/input-number";
-import {Tooltip} from "../tooltip";
-import {add, divideByHundred, multiplyByHundred, sub} from "./decimal";
-
-const isEmpty = (value) => _.isNil(value) || value === "";
-
-export const getStep = (numberFormat) => {
-  if (numberFormat === "Percent") {
-    return 0.01;
-  }
-  return 1;
-};
-
-export const formatValue = (value, isEditing, numberFormat, format) => {
-  const externalizeNumber = (numberFormat, value) => {
-    if (numberFormat === "Percent") {
-      return multiplyByHundred(value);
-    }
-    return value;
-  };
-
-  const externalizeValue = (value) => {
-    return isEditing ? externalizeNumber(numberFormat, value) : value;
-  };
-
-  const maybeFormat = (value) => {
-    return isEditing ? value : format(value);
-  };
-
-  if (isEmpty(value)) {
-    return value;
-  }
-  return _.flow([externalizeValue, maybeFormat])(value);
-};
-
-export const parseValue = (value, numberFormat, numberPrecision) => {
-  const parse = (value) => {
-    const parseInteger = (x) => {
-      const parsed = parseInt(x);
-      return isNaN(parsed) ? null : parsed;
-    };
-    const parseDecimal = (x) => {
-      const parsed = parseFloat(x);
-      return isNaN(parsed) ? null : parsed;
-    };
-
-    const parseStrategy = numberPrecision === 0 ? parseInteger : parseDecimal;
-    return parseStrategy(value);
-  };
-
-  const internalizeNumber = (value) => {
-    if (isEmpty(value)) {
-      return value;
-    }
-    if (numberFormat === "Percent") {
-      return divideByHundred(value);
-    }
-    return value;
-  };
-
-  const toString = (value) => {
-    return isEmpty(value) ? value : String(value);
-  };
-
-  if (isEmpty(value)) {
-    return null;
-  }
-  return _.flow([parse, internalizeNumber, toString])(value);
-};
-
-const propTypes = {
-  value: oneOfType([string, number]),
-  numberFormat: oneOf(["Number", "Money", "Percent"]),
-  numberPrecision: number,
-  decimalSeparator: string,
-  format: func,
-  onFocus: func,
-  onBlur: func,
-  onChange: func,
-  onKeyDown: func,
-  autoFocus: bool,
-  placeholder: string,
-  style: object,
-  disabled: bool,
-  showTooltip: bool,
-  controls: bool,
-};
-
-const defaultProps = {
-  format: _.identity,
-};
-
-export const InputNumber = (props) => {
-  const {value, numberFormat, numberPrecision, format, onFocus, onBlur, onChange, showTooltip = true, ...rest} = props;
-
-  const [isEditing, setIsEditing] = useState(false);
-  const [tooltipVisible, setTooltipVisible] = useState(false);
-  const handleFocus = useCallback(
-    (e) => {
-      if (onFocus) {
-        onFocus(e);
-      }
-      setIsEditing(true);
-    },
-    [onFocus, setIsEditing]
-  );
-
-  const handleBlur = useCallback(
-    (e) => {
-      if (onBlur) {
-        onBlur(e);
-      }
-      setIsEditing(false);
-    },
-    [onBlur, setIsEditing]
-  );
-
-  const handleChange = useCallback(
-    (value) => {
-      if (onChange) {
-        onChange(parseValue(value, numberFormat, numberPrecision));
-      }
-    },
-    [onChange, numberFormat, numberPrecision]
-  );
-
-  const handleStep = useCallback(
-    (newValue, {type}) => {
-      const step = getStep(numberFormat);
-
-      if (type === "up") {
-        onChange(add(value, step));
-      } else {
-        onChange(sub(value, step));
-      }
-    },
-    [value, numberFormat, onChange]
-  );
-
-  let formattedValue = useMemo(() => {
-    return formatValue(value, isEditing, numberFormat, format);
-  }, [value, isEditing, numberFormat, format]);
-
-  const onTooltipVisibleChange = useCallback(
-    (visible) => {
-      if (!showTooltip || isEditing || !formattedValue) {
-        return setTooltipVisible(false);
-      }
-      return setTooltipVisible(visible);
-    },
-    [isEditing, showTooltip, formattedValue]
-  );
-  useEffect(() => {
-    if (tooltipVisible && (!showTooltip || isEditing || !formattedValue)) {
-      setTooltipVisible(false);
-    }
-  }, [formattedValue, isEditing, showTooltip, tooltipVisible]);
-
-  return (
-    <Tooltip title={formattedValue} onVisibleChange={onTooltipVisibleChange} visible={tooltipVisible}>
-      <span>
-        <AntInputNumber
-          className={rest.className}
-          value={formattedValue}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onChange={handleChange}
-          onStep={handleStep}
-          {...rest}
-        />
-      </span>
-    </Tooltip>
-  );
-};
-
-InputNumber.propTypes = propTypes;
-InputNumber.defaultProps = defaultProps;
-
-export const InputNumberField = (props) => {
-  const {input, ...rest} = props;
-  const {value, onBlur, ...inputRest} = input;
-
-  const handleBlur = useCallback(() => {
-    onBlur(isEmpty(value) ? null : value);
-  }, [onBlur, value]);
-
-  return <InputNumber value={value} onBlur={handleBlur} {...inputRest} {...rest} />;
-};

package/src/palette.ts

@@ -1,237 +0,0 @@
-export const slate = {
-  slateBase: "hsl(0, 0%, 100%)",
-  slate1: "hsl(206, 0%, 99%)",
-  slate2: "hsl(210, 0%, 97%)",
-  slate3: "hsl(209, 0%, 96%)",
-  slate4: "hsl(209, 0%, 93%)",
-  slate5: "hsl(208, 0%, 91%)",
-  slate6: "hsl(208, 0%, 89%)",
-  slate7: "hsl(207, 0%, 86%)",
-  slate8: "hsl(205, 0%, 78%)",
-  slate9: "hsl(205, 0%, 62%)",
-  slate10: "hsl(205, 0%, 47%)",
-  slate11: "hsl(204, 0%, 37%)",
-  slate12: "hsl(200, 0%, 9%)",
-} as const;
-
-export const slateDark = {
-  slateBase: "hsl(0, 0%, 5%)",
-  slate1: "hsl(200, 0%, 9%)",
-  slate2: "hsl(195, 0%, 11%)",
-  slate3: "hsl(197, 0%, 14%)",
-  slate4: "hsl(198, 0%, 16%)",
-  slate5: "hsl(199, 0%, 18%)",
-  slate6: "hsl(201, 0%, 20%)",
-  slate7: "hsl(203, 0%, 24%)",
-  slate8: "hsl(207, 0%, 32%)",
-  slate9: "hsl(206, 0%, 44%)",
-  slate10: "hsl(206, 0%, 50%)",
-  slate11: "hsl(206, 0%, 63%)",
-  slate12: "hsl(210, 0%, 93%)",
-} as const;
-
-export const teal = {
-  teal1: "hsl(165, 60%, 99%)",
-  teal2: "hsl(169, 65%, 97%)",
-  teal3: "hsl(169, 60%, 94%)",
-  teal4: "hsl(169, 53%, 90%)",
-  teal5: "hsl(170, 47%, 85%)",
-  teal6: "hsl(170, 43%, 78%)",
-  teal7: "hsl(170, 40%, 68%)",
-  teal8: "hsl(172, 42%, 52%)",
-  teal9: "hsl(173, 80%, 36%)",
-  teal10: "hsl(173, 83%, 33%)",
-  teal11: "hsl(174, 90%, 25%)",
-  teal12: "hsl(170, 50%, 13%)",
-} as const;
-
-export const tealDark = {
-  teal1: "hsl(168, 48%, 6%)",
-  teal2: "hsl(169, 78%, 7%)",
-  teal3: "hsl(170, 76%, 9%)",
-  teal4: "hsl(171, 76%, 11%)",
-  teal5: "hsl(171, 76%, 13%)",
-  teal6: "hsl(172, 76%, 15%)",
-  teal7: "hsl(172, 77%, 19%)",
-  teal8: "hsl(173, 80%, 24%)",
-  teal9: "hsl(173, 80%, 36%)",
-  teal10: "hsl(174, 84%, 38%)",
-  teal11: "hsl(174, 90%, 41%)",
-  teal12: "hsl(166, 73%, 93%)",
-} as const;
-
-export const indigo = {
-  indigo1: "hsl(220, 60%, 99%)",
-  indigo2: "hsl(220, 90%, 99%)",
-  indigo3: "hsl(220, 88%, 97%)",
-  indigo4: "hsl(220, 83%, 95%)",
-  indigo5: "hsl(220, 77%, 92%)",
-  indigo6: "hsl(220, 72%, 88%)",
-  indigo7: "hsl(220, 67%, 82%)",
-  indigo8: "hsl(220, 65%, 75%)",
-  indigo9: "hsl(220, 62%, 56%)",
-  indigo10: "hsl(220, 59%, 51%)",
-  indigo11: "hsl(220, 55%, 45%)",
-  indigo12: "hsl(220, 62%, 17%)",
-} as const;
-
-export const indigoDark = {
-  indigo1: "hsl(222, 24%, 10%)",
-  indigo2: "hsl(222, 36%, 13%)",
-  indigo3: "hsl(222, 43%, 18%)",
-  indigo4: "hsl(222, 47%, 21%)",
-  indigo5: "hsl(222, 45%, 24%)",
-  indigo6: "hsl(222, 43%, 28%)",
-  indigo7: "hsl(222, 50%, 35%)",
-  indigo8: "hsl(222, 55%, 44%)",
-  indigo9: "hsl(222, 60%, 56%)",
-  indigo10: "hsl(222, 65%, 62%)",
-  indigo11: "hsl(222, 70%, 76%)",
-  indigo12: "hsl(222, 83%, 96%)",
-} as const;
-
-export const red = {
-  red1: "hsl(359, 100%, 99%)",
-  red2: "hsl(359, 100%, 99%)",
-  red3: "hsl(360, 100%, 97%)",
-  red4: "hsl(360, 98%, 95%)",
-  red5: "hsl(360, 90%, 92%)",
-  red6: "hsl(360, 82%, 88%)",
-  red7: "hsl(359, 74%, 82%)",
-  red8: "hsl(359, 69%, 74%)",
-  red9: "hsl(358, 75%, 59%)",
-  red10: "hsl(358, 69%, 55%)",
-  red11: "hsl(358, 65%, 49%)",
-  red12: "hsl(354, 50%, 15%)",
-} as const;
-
-export const redDark = {
-  red1: "hsl(353, 23%, 10%)",
-  red2: "hsl(357, 34%, 12%)",
-  red3: "hsl(356, 43%, 16%)",
-  red4: "hsl(356, 48%, 19%)",
-  red5: "hsl(356, 51%, 22%)",
-  red6: "hsl(356, 55%, 26%)",
-  red7: "hsl(357, 60%, 32%)",
-  red8: "hsl(358, 65%, 40%)",
-  red9: "hsl(358, 75%, 59%)",
-  red10: "hsl(358, 85%, 64%)",
-  red11: "hsl(358, 100%, 70%)",
-  red12: "hsl(351, 89%, 96%)",
-} as const;
-
-export const blue = {
-  blue1: "hsl(206, 100%, 99%)",
-  blue2: "hsl(210, 100%, 98%)",
-  blue3: "hsl(209, 100%, 96%)",
-  blue4: "hsl(210, 99%, 94%)",
-  blue5: "hsl(209, 95%, 90%)",
-  blue6: "hsl(209, 81%, 84%)",
-  blue7: "hsl(208, 77%, 77%)",
-  blue8: "hsl(206, 82%, 65%)",
-  blue9: "hsl(206, 100%, 50%)",
-  blue10: "hsl(208, 100%, 47%)",
-  blue11: "hsl(211, 100%, 43%)",
-  blue12: "hsl(211, 100%, 15%)",
-} as const;
-
-export const blueDark = {
-  blue1: "hsl(212, 35%, 9%)",
-  blue2: "hsl(216, 50%, 12%)",
-  blue3: "hsl(214, 59%, 15%)",
-  blue4: "hsl(214, 66%, 18%)",
-  blue5: "hsl(213, 71%, 20%)",
-  blue6: "hsl(212, 77%, 23%)",
-  blue7: "hsl(211, 85%, 27%)",
-  blue8: "hsl(211, 90%, 34%)",
-  blue9: "hsl(206, 100%, 50%)",
-  blue10: "hsl(209, 100%, 61%)",
-  blue11: "hsl(210, 100%, 66%)",
-  blue12: "hsl(206, 98%, 96%)",
-} as const;
-
-export const yellow = {
-  yellow1: "hsl(60, 54%, 98%)",
-  yellow2: "hsl(52, 100%, 95%)",
-  yellow3: "hsl(55, 100%, 91%)",
-  yellow4: "hsl(54, 100%, 87%)",
-  yellow5: "hsl(52, 98%, 82%)",
-  yellow6: "hsl(50, 89%, 76%)",
-  yellow7: "hsl(47, 80%, 68%)",
-  yellow8: "hsl(48, 100%, 46%)",
-  yellow9: "hsl(53, 92%, 50%)",
-  yellow10: "hsl(50, 100%, 48%)",
-  yellow11: "hsl(42, 100%, 29%)",
-  yellow12: "hsl(40, 55%, 13%)",
-} as const;
-
-export const yellowDark = {
-  yellow1: "hsl(45, 100%, 5%)",
-  yellow2: "hsl(46, 100%, 7%)",
-  yellow3: "hsl(45, 100%, 9%)",
-  yellow4: "hsl(45, 100%, 10%)",
-  yellow5: "hsl(47, 100%, 12%)",
-  yellow6: "hsl(49, 100%, 14%)",
-  yellow7: "hsl(49, 90%, 18%)",
-  yellow8: "hsl(50, 100%, 22%)",
-  yellow9: "hsl(53, 92%, 50%)",
-  yellow10: "hsl(54, 100%, 68%)",
-  yellow11: "hsl(48, 100%, 47%)",
-  yellow12: "hsl(53, 100%, 91%)",
-} as const;
-
-export const blackA = {
-  blackA0: "#000000",
-  blackA1: "hsla(0, 0%, 0%, 0.01)",
-  blackA2: "hsla(0, 0%, 0%, 0.03)",
-  blackA3: "hsla(0, 0%, 0%, 0.05)",
-  blackA4: "hsla(0, 0%, 0%, 0.07)",
-  blackA5: "hsla(0, 0%, 0%, 0.09)",
-  blackA6: "hsla(0, 0%, 0%, 0.11)",
-  blackA7: "hsla(0, 0%, 0%, 0.14)",
-  blackA8: "hsla(0, 0%, 0%, 0.22)",
-  blackA9: "hsla(0, 0%, 0%, 0.44)",
-  blackA10: "hsla(0, 0%, 0%, 0.48)",
-  blackA11: "hsla(0, 0%, 0%, 0.57)",
-  blackA12: "hsla(0, 0%, 0%, 0.91)",
-} as const;
-
-export const whiteA = {
-  whiteA0: "#FFFFFF",
-  whiteA1: "hsla(0, 0%, 100%, 0)",
-  whiteA2: "hsla(0, 0%, 100%, 0.01)",
-  whiteA3: "hsla(0, 0%, 100%, 0.03)",
-  whiteA4: "hsla(0, 0%, 100%, 0.06)",
-  whiteA5: "hsla(0, 0%, 100%, 0.09)",
-  whiteA6: "hsla(0, 0%, 100%, 0.12)",
-  whiteA7: "hsla(0, 0%, 100%, 0.18)",
-  whiteA8: "hsla(0, 0%, 100%, 0.25)",
-  whiteA9: "hsla(0, 0%, 100%, 0.39)",
-  whiteA10: "hsla(0, 0%, 100%, 0.45)",
-  whiteA11: "hsla(0, 0%, 100%, 0.59)",
-  whiteA12: "hsla(0, 0%, 100%, 0.92)",
-} as const;
-
-export const opacity = {
-  opacity100: 1,
-  opacity95: 0.95,
-  opacity90: 0.9,
-  opacity85: 0.85,
-  opacity80: 0.8,
-  opacity75: 0.75,
-  opacity70: 0.7,
-  opacity65: 0.65,
-  opacity60: 0.6,
-  opacity55: 0.55,
-  opacity50: 0.5,
-  opacity45: 0.45,
-  opacity40: 0.4,
-  opacity35: 0.35,
-  opacity30: 0.3,
-  opacity25: 0.25,
-  opacity20: 0.2,
-  opacity15: 0.15,
-  opacity10: 0.1,
-  opacity5: 0.05,
-  opacity0: 0,
-} as const;