@preply/ds-web-core 0.63.1 → 0.64.0

package/dist/field/hooks/useTextareaField.d.ts

@@ -0,0 +1,10 @@
+import type { TextareaProps } from '../../input';
+import type { FieldLayoutProps } from '../types';
+declare type UseTextareaFieldState = {
+    layoutProps: Omit<FieldLayoutProps, 'input' | 'className' | 'inputHandle'>;
+    inputProps: TextareaProps;
+};
+export declare const useTextareaField: (props: import("../types").FieldCommonProps & Pick<TextareaProps, "required" | "disabled" | "hasError" | "dataset" | "onClick" | "rows" | "resize" | "autoComplete" | "placeholder" | "maxLength" | "name" | "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onValueChange"> & {
+    id?: string | undefined;
+} & Pick<TextareaProps, "required" | "disabled" | "hasError" | "dataset" | "onClick" | "aria-describedby" | "aria-disabled" | "aria-invalid" | "aria-required" | "rows" | "resize" | "autoComplete" | "placeholder" | "maxLength" | "name" | "value" | "defaultValue" | "onChange" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "onValueChange">) => UseTextareaFieldState;
+export {};

package/dist/field/hooks/useTextareaField.js

@@ -0,0 +1,63 @@
+import { makeTinyId } from '@preply/ds-core';
+import { useState, useCallback } from 'react';
+import { makeDescId } from '../../accessibility/aria/utils.js';
+import { AUTO_COMPLETE_TEXT_DEFAULT } from '../../input/constants.js';
+
+const useTextareaField = (props) => {
+    const { id, value, label, hideLabel, preserveSpace, required, requiredLabel, additionalText, disabled, hasError, errorMessage, onFocus, onBlur, onChange, autoComplete = AUTO_COMPLETE_TEXT_DEFAULT, inputDataset, dataset, ...rest } = props;
+    const actualId = id || makeTinyId();
+    const [isFocused, setIsFocused] = useState(false);
+    const [isTouched, setIsTouched] = useState(false);
+    const [isChanged, setIsChanged] = useState(false);
+    const handleFocus = useCallback(ev => {
+        setIsFocused(true);
+        setIsTouched(true);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(ev);
+    }, []);
+    const handleBlur = useCallback(ev => {
+        setIsFocused(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(ev);
+    }, []);
+    const handleChange = useCallback(ev => {
+        setIsChanged(false);
+        onChange === null || onChange === void 0 ? void 0 : onChange(ev);
+    }, []);
+    const actualHasError = hasError || !!errorMessage;
+    const actualAdditionalText = errorMessage || additionalText;
+    const describeId = actualHasError || !!additionalText ? makeDescId(actualId) : undefined;
+    return {
+        layoutProps: {
+            id: actualId,
+            label,
+            hideLabel,
+            required,
+            requiredLabel,
+            additionalText: actualAdditionalText,
+            preserveSpace,
+            disabled,
+            isFocused,
+            isTouched,
+            isChanged,
+            hasValue: typeof value !== undefined,
+            hasError: actualHasError,
+            dataset,
+        },
+        inputProps: {
+            id: actualId,
+            value,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
+            onChange: handleChange,
+            required,
+            disabled,
+            hasError: actualHasError,
+            autoComplete,
+            dataset: inputDataset,
+            'aria-describedby': describeId,
+            ...rest,
+        },
+    };
+};
+
+export { useTextareaField };
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidXNlVGV4dGFyZWFGaWVsZC5qcyIsInNvdXJjZXMiOlsiLi4vLi4vLi4vc3JjL2ZpZWxkL2hvb2tzL3VzZVRleHRhcmVhRmllbGQudHMiXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgbWFrZVRpbnlJZCB9IGZyb20gJ0BwcmVwbHkvZHMtY29yZSc7XG5pbXBvcnQgeyBDaGFuZ2VFdmVudEhhbmRsZXIsIHVzZUNhbGxiYWNrLCB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcblxuaW1wb3J0IHsgbWFrZURlc2NJZCB9IGZyb20gJy4uLy4uL2FjY2Vzc2liaWxpdHkvYXJpYS91dGlscyc7XG5pbXBvcnQgdHlwZSB7IEZvY3VzRXZlbnRIYW5kbGVyIH0gZnJvbSAnLi4vLi4vZXZlbnRzJztcbmltcG9ydCB0eXBlIHsgVGV4dGFyZWFQcm9wcyB9IGZyb20gJy4uLy4uL2lucHV0JztcbmltcG9ydCB7IEFVVE9fQ09NUExFVEVfVEVYVF9ERUZBVUxUIH0gZnJvbSAnLi4vLi4vaW5wdXQnO1xuaW1wb3J0IHR5cGUgeyBGaWVsZExheW91dFByb3BzLCBUZXh0YXJlYUZpZWxkUHJvcHMgfSBmcm9tICcuLi90eXBlcyc7XG5cbnR5cGUgVXNlVGV4dGFyZWFGaWVsZFN0YXRlID0ge1xuICAgIGxheW91dFByb3BzOiBPbWl0PEZpZWxkTGF5b3V0UHJvcHMsICdpbnB1dCcgfCAnY2xhc3NOYW1lJyB8ICdpbnB1dEhhbmRsZSc+O1xuICAgIGlucHV0UHJvcHM6IFRleHRhcmVhUHJvcHM7XG59O1xuXG5leHBvcnQgY29uc3QgdXNlVGV4dGFyZWFGaWVsZCA9IChcbiAgICBwcm9wczogVGV4dGFyZWFGaWVsZFByb3BzICYgT21pdDxUZXh0YXJlYVByb3BzLCAnaWQnPixcbik6IFVzZVRleHRhcmVhRmllbGRTdGF0ZSA9PiB7XG4gICAgY29uc3Qge1xuICAgICAgICBpZCxcbiAgICAgICAgdmFsdWUsXG4gICAgICAgIGxhYmVsLFxuICAgICAgICBoaWRlTGFiZWwsXG4gICAgICAgIHByZXNlcnZlU3BhY2UsXG4gICAgICAgIHJlcXVpcmVkLFxuICAgICAgICByZXF1aXJlZExhYmVsLFxuICAgICAgICBhZGRpdGlvbmFsVGV4dCxcbiAgICAgICAgZGlzYWJsZWQsXG4gICAgICAgIGhhc0Vycm9yLFxuICAgICAgICBlcnJvck1lc3NhZ2UsXG4gICAgICAgIG9uRm9jdXMsXG4gICAgICAgIG9uQmx1cixcbiAgICAgICAgb25DaGFuZ2UsXG4gICAgICAgIGF1dG9Db21wbGV0ZSA9IEFVVE9fQ09NUExFVEVfVEVYVF9ERUZBVUxULFxuICAgICAgICBpbnB1dERhdGFzZXQsXG4gICAgICAgIGRhdGFzZXQsXG4gICAgICAgIC4uLnJlc3RcbiAgICB9ID0gcHJvcHM7XG5cbiAgICBjb25zdCBhY3R1YWxJZCA9IGlkIHx8IG1ha2VUaW55SWQoKTtcbiAgICBjb25zdCBbaXNGb2N1c2VkLCBzZXRJc0ZvY3VzZWRdID0gdXNlU3RhdGU8Ym9vbGVhbj4oZmFsc2UpO1xuICAgIGNvbnN0IFtpc1RvdWNoZWQsIHNldElzVG91Y2hlZF0gPSB1c2VTdGF0ZTxib29sZWFuPihmYWxzZSk7XG4gICAgY29uc3QgW2lzQ2hhbmdlZCwgc2V0SXNDaGFuZ2VkXSA9IHVzZVN0YXRlPGJvb2xlYW4+KGZhbHNlKTtcblxuICAgIGNvbnN0IGhhbmRsZUZvY3VzOiBGb2N1c0V2ZW50SGFuZGxlciA9IHVzZUNhbGxiYWNrKGV2ID0+IHtcbiAgICAgICAgc2V0SXNGb2N1c2VkKHRydWUpO1xuICAgICAgICBzZXRJc1RvdWNoZWQodHJ1ZSk7XG4gICAgICAgIG9uRm9jdXM/Lihldik7XG4gICAgfSwgW10pO1xuICAgIGNvbnN0IGhhbmRsZUJsdXI6IEZvY3VzRXZlbnRIYW5kbGVyID0gdXNlQ2FsbGJhY2soZXYgPT4ge1xuICAgICAgICBzZXRJc0ZvY3VzZWQoZmFsc2UpO1xuICAgICAgICBvbkJsdXI/Lihldik7XG4gICAgfSwgW10pO1xuICAgIGNvbnN0IGhhbmRsZUNoYW5nZTogQ2hhbmdlRXZlbnRIYW5kbGVyID0gdXNlQ2FsbGJhY2soZXYgPT4ge1xuICAgICAgICBzZXRJc0NoYW5nZWQoZmFsc2UpO1xuICAgICAgICBvbkNoYW5nZT8uKGV2KTtcbiAgICB9LCBbXSk7XG5cbiAgICBjb25zdCBhY3R1YWxIYXNFcnJvciA9IGhhc0Vycm9yIHx8ICEhZXJyb3JNZXNzYWdlO1xuICAgIGNvbnN0IGFjdHVhbEFkZGl0aW9uYWxUZXh0ID0gZXJyb3JNZXNzYWdlIHx8IGFkZGl0aW9uYWxUZXh0O1xuICAgIGNvbnN0IGRlc2NyaWJlSWQgPSBhY3R1YWxIYXNFcnJvciB8fCAhIWFkZGl0aW9uYWxUZXh0ID8gbWFrZURlc2NJZChhY3R1YWxJZCkgOiB1bmRlZmluZWQ7XG5cbiAgICByZXR1cm4ge1xuICAgICAgICBsYXlvdXRQcm9wczoge1xuICAgICAgICAgICAgaWQ6IGFjdHVhbElkLFxuICAgICAgICAgICAgbGFiZWwsXG4gICAgICAgICAgICBoaWRlTGFiZWwsXG4gICAgICAgICAgICByZXF1aXJlZCxcbiAgICAgICAgICAgIHJlcXVpcmVkTGFiZWwsXG4gICAgICAgICAgICBhZGRpdGlvbmFsVGV4dDogYWN0dWFsQWRkaXRpb25hbFRleHQsXG4gICAgICAgICAgICBwcmVzZXJ2ZVNwYWNlLFxuICAgICAgICAgICAgZGlzYWJsZWQsXG4gICAgICAgICAgICBpc0ZvY3VzZWQsXG4gICAgICAgICAgICBpc1RvdWNoZWQsXG4gICAgICAgICAgICBpc0NoYW5nZWQsXG4gICAgICAgICAgICBoYXNWYWx1ZTogdHlwZW9mIHZhbHVlICE9PSB1bmRlZmluZWQsXG4gICAgICAgICAgICBoYXNFcnJvcjogYWN0dWFsSGFzRXJyb3IsXG4gICAgICAgICAgICBkYXRhc2V0LFxuICAgICAgICB9LFxuICAgICAgICBpbnB1dFByb3BzOiB7XG4gICAgICAgICAgICBpZDogYWN0dWFsSWQsXG4gICAgICAgICAgICB2YWx1ZSxcbiAgICAgICAgICAgIG9uRm9jdXM6IGhhbmRsZUZvY3VzLFxuICAgICAgICAgICAgb25CbHVyOiBoYW5kbGVCbHVyLFxuICAgICAgICAgICAgb25DaGFuZ2U6IGhhbmRsZUNoYW5nZSxcbiAgICAgICAgICAgIHJlcXVpcmVkLFxuICAgICAgICAgICAgZGlzYWJsZWQsXG4gICAgICAgICAgICBoYXNFcnJvcjogYWN0dWFsSGFzRXJyb3IsXG4gICAgICAgICAgICBhdXRvQ29tcGxldGUsXG4gICAgICAgICAgICBkYXRhc2V0OiBpbnB1dERhdGFzZXQsXG4gICAgICAgICAgICAnYXJpYS1kZXNjcmliZWRieSc6IGRlc2NyaWJlSWQsXG4gICAgICAgICAgICAuLi5yZXN0LFxuICAgICAgICB9LFxuICAgIH07XG59O1xuIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiI7Ozs7O01BY2EsZ0JBQWdCLEdBQUcsQ0FDNUIsS0FBcUQ7SUFFckQsTUFBTSxFQUNGLEVBQUUsRUFDRixLQUFLLEVBQ0wsS0FBSyxFQUNMLFNBQVMsRUFDVCxhQUFhLEVBQ2IsUUFBUSxFQUNSLGFBQWEsRUFDYixjQUFjLEVBQ2QsUUFBUSxFQUNSLFFBQVEsRUFDUixZQUFZLEVBQ1osT0FBTyxFQUNQLE1BQU0sRUFDTixRQUFRLEVBQ1IsWUFBWSxHQUFHLDBCQUEwQixFQUN6QyxZQUFZLEVBQ1osT0FBTyxFQUNQLEdBQUcsSUFBSSxFQUNWLEdBQUcsS0FBSyxDQUFDO0lBRVYsTUFBTSxRQUFRLEdBQUcsRUFBRSxJQUFJLFVBQVUsRUFBRSxDQUFDO0lBQ3BDLE1BQU0sQ0FBQyxTQUFTLEVBQUUsWUFBWSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNELE1BQU0sQ0FBQyxTQUFTLEVBQUUsWUFBWSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBQzNELE1BQU0sQ0FBQyxTQUFTLEVBQUUsWUFBWSxDQUFDLEdBQUcsUUFBUSxDQUFVLEtBQUssQ0FBQyxDQUFDO0lBRTNELE1BQU0sV0FBVyxHQUFzQixXQUFXLENBQUMsRUFBRTtRQUNqRCxZQUFZLENBQUMsSUFBSSxDQUFDLENBQUM7UUFDbkIsWUFBWSxDQUFDLElBQUksQ0FBQyxDQUFDO1FBQ25CLE9BQU8sYUFBUCxPQUFPLHVCQUFQLE9BQU8sQ0FBRyxFQUFFLEVBQUU7S0FDakIsRUFBRSxFQUFFLENBQUMsQ0FBQztJQUNQLE1BQU0sVUFBVSxHQUFzQixXQUFXLENBQUMsRUFBRTtRQUNoRCxZQUFZLENBQUMsS0FBSyxDQUFDLENBQUM7UUFDcEIsTUFBTSxhQUFOLE1BQU0sdUJBQU4sTUFBTSxDQUFHLEVBQUUsRUFBRTtLQUNoQixFQUFFLEVBQUUsQ0FBQyxDQUFDO0lBQ1AsTUFBTSxZQUFZLEdBQXVCLFdBQVcsQ0FBQyxFQUFFO1FBQ25ELFlBQVksQ0FBQyxLQUFLLENBQUMsQ0FBQztRQUNwQixRQUFRLGFBQVIsUUFBUSx1QkFBUixRQUFRLENBQUcsRUFBRSxFQUFFO0tBQ2xCLEVBQUUsRUFBRSxDQUFDLENBQUM7SUFFUCxNQUFNLGNBQWMsR0FBRyxRQUFRLElBQUksQ0FBQyxDQUFDLFlBQVksQ0FBQztJQUNsRCxNQUFNLG9CQUFvQixHQUFHLFlBQVksSUFBSSxjQUFjLENBQUM7SUFDNUQsTUFBTSxVQUFVLEdBQUcsY0FBYyxJQUFJLENBQUMsQ0FBQyxjQUFjLEdBQUcsVUFBVSxDQUFDLFFBQVEsQ0FBQyxHQUFHLFNBQVMsQ0FBQztJQUV6RixPQUFPO1FBQ0gsV0FBVyxFQUFFO1lBQ1QsRUFBRSxFQUFFLFFBQVE7WUFDWixLQUFLO1lBQ0wsU0FBUztZQUNULFFBQVE7WUFDUixhQUFhO1lBQ2IsY0FBYyxFQUFFLG9CQUFvQjtZQUNwQyxhQUFhO1lBQ2IsUUFBUTtZQUNSLFNBQVM7WUFDVCxTQUFTO1lBQ1QsU0FBUztZQUNULFFBQVEsRUFBRSxPQUFPLEtBQUssS0FBSyxTQUFTO1lBQ3BDLFFBQVEsRUFBRSxjQUFjO1lBQ3hCLE9BQU87U0FDVjtRQUNELFVBQVUsRUFBRTtZQUNSLEVBQUUsRUFBRSxRQUFRO1lBQ1osS0FBSztZQUNMLE9BQU8sRUFBRSxXQUFXO1lBQ3BCLE1BQU0sRUFBRSxVQUFVO1lBQ2xCLFFBQVEsRUFBRSxZQUFZO1lBQ3RCLFFBQVE7WUFDUixRQUFRO1lBQ1IsUUFBUSxFQUFFLGNBQWM7WUFDeEIsWUFBWTtZQUNaLE9BQU8sRUFBRSxZQUFZO1lBQ3JCLGtCQUFrQixFQUFFLFVBQVU7WUFDOUIsR0FBRyxJQUFJO1NBQ1Y7S0FDSixDQUFDO0FBQ047Ozs7In0=

package/dist/field/index.d.ts

@@ -3,5 +3,6 @@ export * from './hooks/usePasswordField';
 export * from './hooks/useTextField';
 export * from './hooks/useNumberField';
 export * from './hooks/useSelectField';
+export * from './hooks/useTextareaField';
 export * from './options';
 export * from './types';

package/dist/field/index.js

@@ -3,5 +3,6 @@ export { usePasswordField } from './hooks/usePasswordField.js';
 export { useTextField } from './hooks/useTextField.js';
 export { useNumberField } from './hooks/useNumberField.js';
 export { useSelectField } from './hooks/useSelectField.js';
+export { useTextareaField } from './hooks/useTextareaField.js';
 export { ADDITIONAL_TEXT_VARIANT_OPTIONS } from './options.js';
-//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7OzsifQ==
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VzIjpbXSwic291cmNlc0NvbnRlbnQiOltdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiOzs7Ozs7In0=

package/dist/field/types.d.ts

@@ -3,7 +3,7 @@ import type { MouseEventHandler, ReactNode } from 'react';
 import React from 'react';
 import { IconProps } from '../icon/types';
 import type { AutoCompletePasswordOptions, SimpleTextInputType, SingleLineInputType } from '../input/private/types';
-import type { CombinableInputProps, InputNumberProps, InputPasswordProps, InputTextProps, SelectProps } from '../input/types';
+import type { CombinableInputProps, InputNumberProps, InputPasswordProps, InputTextProps, SelectProps, TextareaProps } from '../input/types';
 import { ReactSVGComponentType } from '../svg/types';
 export declare type FieldValue = string | number | boolean;
 /**
@@ -94,3 +94,4 @@ export declare type SelectFieldProps = FieldCommonProps & CombinableInputProps<S
     icon?: React.ReactElement<IconProps>;
     children?: ReactNode | ReactNode[];
 };
+export declare type TextareaFieldProps = FieldCommonProps & CombinableInputProps<TextareaProps>;

package/dist/generated/breakpoints.less

@@ -1,4 +1,4 @@
-/* AUTO GENERATED @Fri Aug 18 2023 14:40:49 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED @Tue Aug 29 2023 09:22:21 GMT+0000 (Coordinated Universal Time) */
 
 @breakpoints: {
     narrow-l: 400px;

package/dist/generated/options.less

@@ -1,4 +1,4 @@
-/* AUTO GENERATED @Fri Aug 18 2023 14:40:48 GMT+0000 (Coordinated Universal Time) */
+/* AUTO GENERATED @Tue Aug 29 2023 09:22:20 GMT+0000 (Coordinated Universal Time) */
 
 @ACTION_VARIANT_ACTIVE_BORDER_COLOR_OPTIONS: primary, secondary, tertiary, quaternary, plain,
     dangerous, critical;
@@ -12,11 +12,12 @@
     dangerous, critical;
 @ACTION_VARIANT_TEXT_DECORATION_OPTIONS: primary, secondary, tertiary, quaternary, plain, dangerous,
     critical;
-@AVATAR_SIZE_OPTIONS: 2xs, xs, s, m, l, xl;
+@AVATAR_SIZE_OPTIONS: 2xs, xs, s, m, l, xl, 24, 32, 48, 64, 96, 160;
+@BADGE_ACCENT_OPTIONS: accent, positive, critical, warning, info, tertiary;
 @BADGE_COLOR_OPTIONS: gray, teal, green, blue, yellow, red, magenta;
-@BADGE_SIZE_OPTIONS: xs, s, m;
+@BADGE_SIZE_OPTIONS: xs, s, m, default;
 @BOX_PADDING_OPTIONS: none, 3xs, 2xs, xs, s, m, l, xl;
-@BOX_RADIUS_OPTIONS: none, m, l;
+@BOX_RADIUS_OPTIONS: none, m, l, 2, 4, 8, 0, 2, 4, 8, 12, 16, 24, 32, 48, 64, 96, 160;
 @BUTTON_FONT_FAMILY_OPTIONS: large, default, medium, small;
 @BUTTON_FONT_SIZE_OPTIONS: large, medium, default, small;
 @BUTTON_FONT_WEIGHT_OPTIONS: large, medium, default, small;
@@ -26,30 +27,35 @@
 @BUTTON_SIZE_OPTIONS: xs, s, m, l, xl;
 @BUTTON_VARIANT_OPTIONS: primary, secondary, tertiary, quaternary, plain, dangerous, critical;
 @BUTTON_VERTICAL_PADDING_OPTIONS: large, medium, small;
-@COLOR_BACKGROUND_OPTIONS: primary, secondary, tertiary, accent, overlay, disabled, accentLight,
-    positiveLight, infoLight, warningLight, criticalLight, accentDark, positiveDark, infoDark,
-    warningDark, criticalDark;
-@COLOR_BACKGROUND_ACTION_ACTIVE_OPTIONS: primary, secondary, tertiary, quaternary, critical;
-@COLOR_BACKGROUND_ACTION_HOVER_OPTIONS: primary, secondary, tertiary, quaternary, critical;
-@COLOR_BACKGROUND_ACTION_REST_OPTIONS: primary, secondary, tertiary, quaternary, critical;
-@COLOR_BLUE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
-@COLOR_BORDER_OPTIONS: primary, secondary, focus, critical, tertiary;
-@COLOR_BORDER_ACTION_OPTIONS: primary, secondary, tertiary, quaternary, critical, disabled;
-@COLOR_GREY_OPTIONS: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 900-56;
-@COLOR_GREY_OPACITY_OPTIONS: 900-56;
-@COLOR_ICON_OPTIONS: primary, secondary, tertiary, positive, info, warning, critical, accent;
+@COLOR_BACKGROUND_OPTIONS: primary, secondary, tertiary, accent, overlay, disabled, brand, accent,
+    positive, info, warning, critical;
+@COLOR_BACKGROUND_ACTION_ACTIVE_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary,
+    quaternary, critical;
+@COLOR_BACKGROUND_ACTION_HOVER_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary,
+    quaternary, critical;
+@COLOR_BACKGROUND_ACTION_REST_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary,
+    quaternary, critical;
+@COLOR_BLUE_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
+@COLOR_BORDER_OPTIONS: primary, secondary, focus, critical, tertiary, brand;
+@COLOR_BORDER_ACTION_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary, quaternary,
+    critical, disabled;
+@COLOR_GREY_DS_INTERNAL_PRIMITIVE_OPTIONS: 0, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900,
+    900-56, 900-6;
+@COLOR_GREY_OPACITY_DS_INTERNAL_PRIMITIVE_OPTIONS: 900-56;
+@COLOR_ICON_OPTIONS: primary, secondary, tertiary, positive, info, warning, critical, brand;
 @COLOR_NAME_OPTIONS: white, gray-100, gray-200, gray-300, gray-400, gray-500, gray-600, teal-100,
     teal-200, teal-300, teal-400, teal-500, green-100, green-200, green-300, green-400, green-500,
     yellow-100, yellow-200, yellow-300, yellow-400, yellow-500, red-100, red-200, red-300, red-400,
     red-500, blue-100, blue-200, blue-300, blue-400, blue-500, magenta-100, magenta-200, magenta-300,
     magenta-400, magenta-500;
-@COLOR_PINK_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
-@COLOR_RED_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
+@COLOR_PINK_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
+@COLOR_RED_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
 @COLOR_SCHEME_OPTIONS: base, banner, invert;
-@COLOR_TEAL_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
-@COLOR_TEXT_OPTIONS: primary, secondary, tertiary, positive, info, warning, critical, accent;
-@COLOR_TEXT_ACTION_OPTIONS: primary, secondary, tertiary, quaternary, critical, disabled;
-@COLOR_YELLOW_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
+@COLOR_TEAL_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
+@COLOR_TEXT_OPTIONS: primary, secondary, tertiary, brand, accent, positive, info, warning, critical;
+@COLOR_TEXT_ACTION_DS_INTERNAL_PRIMITIVE_OPTIONS: primary, secondary, tertiary, quaternary, critical,
+    disabled;
+@COLOR_YELLOW_DS_INTERNAL_PRIMITIVE_OPTIONS: 50, 100, 200, 300, 400, 500, 600, 700, 800;
 @HEADING_LEVEL_OPTIONS: h1, h2, h3, h4, h5;
 @HEADING_TAG_OPTIONS: h1, h2, h3, h4, h5, p, div;
 @ICON_SIZE_OPTIONS: 2xs, xs, s, m, l;
@@ -69,14 +75,16 @@
 @PANEL_PADDING_OPTIONS: small, base, medium, large;
 @PREPLY_LOGO_VARIANT_OPTIONS: default, monochrome, ua;
 @RADIUS_OPTIONS: 2, 4, 8, 300;
-@SPACING_OPTIONS: 0, 2, 4, 8, 12, 16, 24, 32, 48, 64, 88, 120;
+@SPACING_OPTIONS: 0, 2, 4, 8, 12, 16, 24, 32, 48, 64, 96, 160;
+@SPINNER_SIZE_OPTIONS: default, large;
 @TEXT_ACCENT_OPTIONS: primary, secondary, branded, positive, error, tertiary, selected, warning,
     info, accent, disabled;
 @TEXT_HEADING_FONT_FAMILY_OPTIONS: huge, extraLarge, large, medium, small;
 @TEXT_HEADING_FONT_SIZE_OPTIONS: huge, extraLarge, large, medium, small;
 @TEXT_HEADING_FONT_WEIGHT_OPTIONS: huge, extraLarge, large, medium, small;
 @TEXT_HEADING_LING_HEIGHT_OPTIONS: huge, extraLarge, large, medium, small;
-@TEXT_HIGHLIGHT_OPTIONS: blue, green;
+@TEXT_HIGHLIGHT_OPTIONS: blue, green, primary, secondary, tertiary, accent, positive, info, warning,
+    critical;
 @TEXT_INLINE_TAG_OPTIONS: span, strong, em;
 @TEXT_REGULAR_BODY_FONT_FAMILY_OPTIONS: large, default, small, caption;
 @TEXT_REGULAR_BODY_FONT_SIZE_OPTIONS: large, default, small, caption;
@@ -89,7 +97,8 @@
 @TEXT_SIZE_OPTIONS: 2xs, xs, s, m, l, xl;
 @TEXT_TAG_OPTIONS: p, div, span;
 @TEXT_VARIANT_OPTIONS: xs, xs-medium, s, s-italic, s-medium, s-medium-italic, s-bold, s-bold-italic,
-    m, m-italic, m-medium, m-medium-italic, m-bold, m-bold-italic, l, l-italic, l-medium,
+    m, m-italic, m-medium, m-medium-italic, m-bold, m-bold-italic, default, default-italic,
+    default-medium, default-medium-italic, default-bold, default-bold-italic, l, l-italic, l-medium,
     l-medium-italic, xl, xl-italic, xl-medium, xl-medium-italic;
 @TEXT_WEIGHT_OPTIONS: 400, 500, 700, normal, medium, bold;
 @THEME_OPTIONS: tokyo-ui, bold-ui, base-ui, preply-ui;