@itcase/ui 1.2.31 → 1.2.32

package/dist/components/SVGContent.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/ScrollOnDrag.js

@@ -5,8 +5,8 @@ import clsx from 'clsx';
 import { ScrollContainer } from 'react-indiana-drag-scroll';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/ScrollToView.js

@@ -4,8 +4,8 @@ import { ScrollLink } from 'react-scroll';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/Search.js

@@ -1,14 +1,13 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
-import { searchAppearance } from '../appearance/Search.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { I as Icon } from '../Icon-B7BJo5kW.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
+import { I as Icon } from '../Icon-DptCmI_y.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import { S as Scrollbar } from '../Scrollbar-Bo7z7ELm.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
@@ -17,15 +16,21 @@ import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip-f5EWhsGj.js';
-import '../appearance/Tooltip.js';
-import '../Title-mkus84Rh.js';
-import '../appearance/Title.js';
-import '../appearance/Text.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';
 import 'react-scrollbars-custom';
 
+var searchAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        fill: 'surfacePrimary',
+        placeholderTextColor: 'surfaceTextQuaternary',
+        shape: 'rounded',
+    },
+};
+
 var searchInputConfig = {
     appearance: searchAppearance,
     setAppearance: function (newComponent) {

package/dist/components/Segmented.js

@@ -1,20 +1,31 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React, { useRef, useMemo, createRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
-import { segmentedAppearance } from '../appearance/Segmented.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import 'lodash/castArray';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import '../appearance/Text.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 
+var segmentedAppearance = {
+    dev: {
+        width: 'fill',
+        fill: 'surfaceSecondary',
+        fillHover: 'surfacePrimaryHover',
+        indicatorFill: 'accentPrimary',
+        labelTextActiveColor: 'accentTextPrimary',
+        labelTextColor: 'surfaceTextPrimary',
+        labelTextSize: 'm',
+        shape: 'rounded',
+    },
+};
+
 var segmentedConfig = {
     appearance: segmentedAppearance,
     setAppearance: function (newComponent) {

package/dist/components/Select.js

@@ -1,18 +1,16 @@
-import { selectAppearance } from '../appearance/Select.js';
 import { _ as __assign } from '../tslib.es6-5FtW-kfi.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import Select, { components } from 'react-select';
-import { I as Icon } from '../Icon-B7BJo5kW.js';
+import { I as Icon } from '../Icon-DptCmI_y.js';
 import React, { useMemo, useRef, useCallback, useEffect } from 'react';
 import clsx from 'clsx';
 import CreatableSelect from 'react-select/creatable';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import { B as Badge } from '../Badge-DQnTpE4I.js';
-import { G as Group } from '../Group-Dc70Z4_7.js';
-import { D as Divider } from '../Divider-DE2Q5J36.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { G as Group } from '../Group-BCvs5UxK.js';
+import { D as Divider } from '../Divider-DHIuQUsH.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/camelCase';
 import 'lodash/maxBy';
@@ -22,15 +20,32 @@ import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip-f5EWhsGj.js';
-import '../appearance/Tooltip.js';
-import '../Title-mkus84Rh.js';
-import '../appearance/Title.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';
 import 'lodash/castArray';
-import '../appearance/Text.js';
-import '../appearance/Badge.js';
-import '../appearance/Group.js';
-import '../appearance/Divider.js';
+
+var selectAppearance = {
+    dev: {
+        elevation: 8,
+        inputBorderColor: 'surfaceBorderTertiary',
+        inputBorderColorHover: 'surfaceBorderQuaternary',
+        inputFill: 'surfacePrimary',
+        inputShape: 'rounded',
+        inputTextColor: 'surfaceTextPrimary',
+        inputTextSize: 'm',
+        noOptionsText: 'Ничего не найдено...',
+        noOptionsTextColor: 'surfaceTextPrimary',
+        noOptionsTextSize: 'm',
+        optionFill: 'surfacePrimary',
+        optionFillHover: 'surfacePrimaryHover',
+        optionTextColor: 'surfaceTextPrimary',
+        optionTextSize: 'm',
+        placeholder: 'Выбрать...',
+        placeholderTextColor: 'surfaceTextSecondary',
+        placeholderTextSize: 'm',
+        size: 'normal',
+    },
+};
 
 // interface ClearIndicatorProps<Option, IsMulti extends boolean, Group extends GroupBase<Option>>
 //   extends DefaultClearIndicatorProps<Option, IsMulti, Group> {}

package/dist/components/SiteMenu.js

@@ -1,28 +1,27 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { useCallback } from 'react';
 import clsx from 'clsx';
-import { siteMenuAppearance } from '../appearance/SiteMenu.js';
 import { useSiteMenuContext } from '../context/UIContext.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import { I as Icon } from '../Icon-B7BJo5kW.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
+import { I as Icon } from '../Icon-DptCmI_y.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../tslib.es6-5FtW-kfi.js';
 import 'react-inlinesvg';
-import '../appearance/Icon.js';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
 import '../Link-CeQuavin.js';
-import '../Tooltip-f5EWhsGj.js';
-import '../appearance/Tooltip.js';
-import '../Title-mkus84Rh.js';
-import '../appearance/Title.js';
-import '../appearance/Text.js';
+import '../Tooltip--c-4Qp04.js';
+import '../Title-YVzIwk68.js';
+
+var siteMenuAppearance = {
+    dev: {},
+};
 
 var siteMenuConfig = {
     appearance: siteMenuAppearance,

package/dist/components/Swiper.js

@@ -4,16 +4,15 @@ import clsx from 'clsx';
 import { Swiper as Swiper$1, SwiperSlide } from 'swiper/react';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { T as Title } from '../Title-mkus84Rh.js';
-import 'lodash/castArray';
+import { T as Title } from '../Title-YVzIwk68.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Title.js';
 
 function Swiper(props) {
     var id = props.id, children = props.children, direction = props.direction, isChangeOnClickSlide = props.isChangeOnClickSlide, isInit = props.isInit, _a = props.isNavigation, isNavigation = _a === void 0 ? false : _a, isScrollbar = props.isScrollbar, _b = props.activeSlideIndex, activeSlideIndex = _b === void 0 ? 0 : _b, allowTouchMove = props.allowTouchMove, autoHeight = props.autoHeight, breakpoints = props.breakpoints, className = props.className, forwardedRef = props.forwardedRef, // https://github.com/vercel/next.js/issues/4957

package/dist/components/Switch.js

@@ -1,7 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { switchAppearance } from '../appearance/Switch.js';
+
+var switchAppearance = {
+    dev: {},
+};
 
 var switchConfig = {
     appearance: switchAppearance,

package/dist/components/Tab.js

@@ -1,25 +1,120 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import clsx from 'clsx';
-import { tabAppearance } from '../appearance/Tab.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-DQnTpE4I.js';
-import { D as Divider } from '../Divider-DE2Q5J36.js';
+import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { D as Divider } from '../Divider-DHIuQUsH.js';
 import { L as Link } from '../Link-CeQuavin.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import 'lodash/castArray';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Badge.js';
-import '../appearance/Divider.js';
 import '../tslib.es6-5FtW-kfi.js';
-import '../appearance/Text.js';
+
+var tabAppearance = {
+    any: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfacePrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiary',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfacePrimary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfacePrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfacePrimaryHover',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfaceSecondary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfaceSecondary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceSecondaryHover',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfaceTertiary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfaceTertiary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiaryHover',
+        labelColor: 'surfaceTextPrimary',
+        labelColorActive: 'surfaceTextAccent',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    surfaceQuaternary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'surfaceQuaternary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'surfaceTertiaryHover',
+        labelColor: 'surfaceTextInverse',
+        labelColorActive: 'surfaceTextInverse',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    accent: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'surfacePrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'accentPrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'accentPrimaryHover',
+        labelColor: 'accentTextPrimary',
+        labelColorActive: 'accentTextPrimary',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    primary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'primaryPrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'primaryPrimaryHover',
+        labelColor: 'primaryTextPrimary',
+        labelColorActive: 'primaryTextPrimary',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+    secondary: {
+        dividerFill: 'surfaceTertiary',
+        dividerFillActive: 'accentPrimary',
+        dividerFillDisabled: 'accentDisabled',
+        dividerFillHover: 'surfaceTertiary',
+        fill: 'secondaryPrimary',
+        fillDisabled: 'surfaceDisabled',
+        fillHover: 'secondaryPrimaryHover',
+        labelColor: 'secondaryTextPrimary',
+        labelColorActive: 'secondaryTextPrimary',
+        labelColorDisabled: 'surfaceTextDisabled',
+    },
+};
 
 var tabConfig = {
     appearance: tabAppearance,
@@ -149,4 +244,4 @@ function TabGroup(props) {
     return (jsx("div", { className: clsx(className, 'tab-group', 'group', widthClass, contentAlignClass, alignDirectionClass, directionClass, alignClass, fillClass, set && "group_set_".concat(set), horizontalScroll && 'group_type_horizontal_scroll', wrapClass, borderColorClass, borderWidthClass, borderTypeClass), "data-tour": dataTour, id: id, style: Object.assign({}, groupStyles, style), children: horizontalScroll ? (jsx("div", { className: "tab-group__wrapper group__wrapper", style: groupWrapperStyles, children: children })) : (children) }));
 }
 
-export { Tab, TabGroup, tabConfig };
+export { Tab, TabGroup, tabAppearance, tabConfig };

package/dist/components/Text.js

@@ -1,11 +1,10 @@
-export { T as Text, t as textConfig } from '../Text-DlSG_p4u.js';
+export { T as Text, t as textConfig } from '../Text-C4Bg2Mv6.js';
 import 'react/jsx-runtime';
 import 'clsx';
-import '../appearance/Text.js';
 import '../hooks/useDeviceTargetClass.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/components/Textarea.js

@@ -1,14 +1,68 @@
 import { jsx } from 'react/jsx-runtime';
 import { useMemo } from 'react';
 import clsx from 'clsx';
-import { textareaAppearance, textareaState } from '../appearance/Textarea.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 
+var textareaAppearance = {
+    dev: {
+        borderColor: 'surfaceBorderTertiary',
+        borderHover: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'surfaceTextSecondary',
+        shape: 'rounded',
+        size: 'm',
+        textColor: 'surfaceTextPrimary',
+        textSize: 'm',
+    },
+};
+var textareaState = {
+    active: {
+        borderColor: 'surfaceBorderActive',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    activeFilled: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    disabled: {
+        borderColor: 'surfaceBorderDisabled',
+        placeholderTextColor: 'surfaceTextDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    error: {
+        borderColor: 'errorBorderPrimary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    errorFilled: {
+        borderColor: 'errorBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+    filled: {
+        borderColor: 'surfaceBorderQuaternary',
+        textColor: 'surfaceTextPrimary',
+    },
+    normal: {
+        borderColor: 'surfaceBorderQuaternary',
+        placeholderTextColor: 'secondaryTextSecondary',
+    },
+    readonly: {
+        borderColor: 'surfaceBorderDisabled',
+        textColor: 'surfaceTextPrimary',
+    },
+    require: {
+        borderColor: 'surfaceBorderActive',
+        textColor: 'surfaceTextPrimary',
+    },
+    success: {
+        borderColor: 'successBorderPrimary',
+        textColor: 'surfaceTextPrimary',
+    },
+};
+
 var textareaConfig = {
     appearance: textareaAppearance,
     setAppearance: function (newComponent) {

package/dist/components/Tile.js

@@ -1,23 +1,23 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { tileAppearance } from '../appearance/Tile.js';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
-import { B as Badge } from '../Badge-DQnTpE4I.js';
-import { T as Text } from '../Text-DlSG_p4u.js';
-import { T as Title } from '../Title-mkus84Rh.js';
+import { B as Badge } from '../Badge-DBeSKfoF.js';
+import { T as Text } from '../Text-C4Bg2Mv6.js';
+import { T as Title } from '../Title-YVzIwk68.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../appearance/Badge.js';
-import '../appearance/Text.js';
-import '../appearance/Title.js';
+
+var tileAppearance = {
+    dev: {},
+};
 
 var tileConfig = {
     appearance: tileAppearance,

package/dist/components/Title.js

@@ -1,14 +1,13 @@
-export { T as Title, t as titleConfig } from '../Title-mkus84Rh.js';
+export { T as Title, t as titleConfig } from '../Title-YVzIwk68.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/Title.js';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';

package/dist/components/Tooltip.js

@@ -1,11 +1,10 @@
-export { T as Tooltip, t as tooltipConfig } from '../Tooltip-f5EWhsGj.js';
+export { T as Tooltip, t as tooltipConfig } from '../Tooltip--c-4Qp04.js';
 import 'react/jsx-runtime';
 import 'react';
 import 'clsx';
-import '../appearance/Tooltip.js';
 import '../hooks/useDeviceTargetClass.js';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';
@@ -13,7 +12,5 @@ import '../hooks/useStyles.js';
 import 'lodash/maxBy';
 import 'lodash/upperFirst';
 import '../hooks/styleAttributes.js';
-import '../Text-DlSG_p4u.js';
-import '../appearance/Text.js';
-import '../Title-mkus84Rh.js';
-import '../appearance/Title.js';
+import '../Text-C4Bg2Mv6.js';
+import '../Title-YVzIwk68.js';

package/dist/components/Video.js

@@ -14,7 +14,7 @@ function Video(props) {
     var id = props.id, children = props.children, className = props.className, poster = props.poster, webm = props.webm, ogv = props.ogv, mp4 = props.mp4, type = props.type, position = props.position;
     // @ts-expect-error
     var videoStyles = useStyles(props).styles;
-    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { autoPlay: true, className: "video__wrapper", poster: poster, muted: true, loop: true, playsInline: false, children: [webm && (jsx("source", { src: webm, type: "video/webm", 
+    return (jsxs("div", { className: clsx('video', className, type && "video_type_".concat(type), position && "video_position_".concat(position)), id: id, style: videoStyles, children: [jsxs("video", { className: "video__wrapper", autoPlay: true, muted: true, loop: true, poster: poster, playsInline: false, children: [webm && (jsx("source", { src: webm, type: "video/webm", 
                         // @ts-expect-error
                         codecs: "vp8, vorbis" })), ogv && (jsx("source", { src: ogv, type: "video/ogg", 
                         // @ts-expect-error

package/dist/components/Wrapper.js

@@ -3,8 +3,8 @@ import clsx from 'clsx';
 import { useDeviceTargetClass } from '../hooks/useDeviceTargetClass.js';
 import { useStyles } from '../hooks/useStyles.js';
 import 'react';
-import 'lodash/castArray';
 import 'lodash/camelCase';
+import 'lodash/castArray';
 import '../context/UIContext.js';
 import '../hooks/useMediaQueries.js';
 import 'react-responsive';

package/dist/css/components/Accordion/Accordion.tokens.css

@@ -0,0 +1,4 @@
+:root {
+  --accordion-item-shape-rounded: 12px;
+}
+

package/dist/css/components/Avatar/Avatar.css

@@ -33,7 +33,7 @@
           var(--color-surface-secondary)
         );
         background-size: 200%;
-        animation: avatar-skeleton 3s infinite linear;
+        animation: avatarSkeleton 3s infinite linear;
         ^^^&__name {
           color: transparent;
         }
@@ -41,7 +41,7 @@
     }
   }
 }
-@keyframes avatar-skeleton {
+@keyframes avatarSkeleton {
   0% {
     background-position: 200%;
   }

package/dist/css/components/Avatar/Avatar.tokens.css

@@ -0,0 +1,2 @@
+:root {
+}