@snack-uikit/toggles 0.10.4 → 0.10.5-preview-d96c83e8.0

package/dist/cjs/helperComponents/Spinner/Spinner.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var __importDefault = void 0 && (void 0).__importDefault || function (mod) {
+  return mod && mod.__esModule ? mod : {
+    "default": mod
+  };
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Spinner = Spinner;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styles_module_scss_1 = __importDefault({});
+function Spinner() {
+  return (0, jsx_runtime_1.jsx)("svg", {
+    viewBox: '0 0 16 16',
+    fill: 'none',
+    xmlns: 'http://www.w3.org/2000/svg',
+    className: styles_module_scss_1.default.spinner,
+    children: (0, jsx_runtime_1.jsx)("path", {
+      d: 'M5 8C5 6.34315 6.34315 5 8 5',
+      stroke: 'black',
+      strokeWidth: '1.5',
+      strokeLinecap: 'round'
+    })
+  });
+}

package/dist/cjs/helperComponents/Spinner/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Spinner"), exports);

package/dist/cjs/helperComponents/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./Spinner"), exports);

package/dist/cjs/index.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./components"), exports);

package/dist/cjs/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/dist/cjs/utils.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getVisualStateAttributes = getVisualStateAttributes;
+exports.getIconSize = getIconSize;
+const constants_1 = require("./constants");
+function getVisualStateAttributes(state) {
+  return Object.entries(state).reduce(function (result, _ref) {
+    let [name, value] = _ref;
+    result[`data-${name.toLowerCase()}`] = value;
+    return result;
+  }, {});
+}
+function getIconSize(size) {
+  switch (size) {
+    case constants_1.SIZE.S:
+      {
+        return 16;
+      }
+    case constants_1.SIZE.M:
+    default:
+      {
+        return 24;
+      }
+  }
+}

package/dist/esm/components/Checkbox/Checkbox.d.ts

@@ -0,0 +1,8 @@
+import { ToggleProps } from '../../types';
+export type CheckboxProps = ToggleProps & {
+    /** Состояние частичного выбора */
+    indeterminate?: boolean;
+    /** Состояние частичного выбора по-умолчанию */
+    indeterminateDefault?: boolean;
+};
+export declare function Checkbox({ inputRef, indeterminate: indeterminateProp, indeterminateDefault, onChange: onChangeProp, 'data-test-id': dataTestId, size, ...restProps }: CheckboxProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Checkbox/index.js

@@ -0,0 +1 @@
+export * from './Checkbox';

package/dist/esm/components/Favorite/Favorite.d.ts

@@ -0,0 +1,6 @@
+import { FavoriteIcon, ToggleProps } from '../../types';
+export type FavoriteProps = ToggleProps & {
+    /** Иконка */
+    icon?: FavoriteIcon;
+};
+export declare function Favorite({ inputRef, 'data-test-id': dataTestId, size, icon, ...restProps }: FavoriteProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Favorite/index.js

@@ -0,0 +1 @@
+export * from './Favorite';

package/dist/esm/components/Radio/Radio.d.ts

@@ -0,0 +1,3 @@
+import { ToggleProps } from '../../types';
+export type RadioProps = ToggleProps;
+export declare function Radio({ inputRef, 'data-test-id': dataTestId, ...restProps }: RadioProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Radio/index.js

@@ -0,0 +1 @@
+export * from './Radio';

package/dist/esm/components/Switch/Switch.d.ts

@@ -0,0 +1,7 @@
+import { ToggleProps } from '../../types';
+export type SwitchProps = ToggleProps & {
+    /** Показывать ли иконку в переключателе */
+    showIcon?: boolean;
+    loading?: boolean;
+};
+export declare function Switch({ inputRef, 'data-test-id': dataTestId, showIcon, loading, size, ...restProps }: SwitchProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/Switch/index.js

@@ -0,0 +1 @@
+export * from './Switch';

package/dist/esm/components/ToggleGroup/ToggleGroup.d.ts

@@ -0,0 +1,22 @@
+import { PropsWithChildren } from 'react';
+import { SELECTION_MODE } from '../../constants';
+export type ToggleGroupProps = PropsWithChildren<{
+    /** Начальное состояние */
+    defaultValue?: string;
+    /** Controlled состояние */
+    value?: string;
+    /** Controlled обработчик измения состояния */
+    onChange?(value: (string | undefined) | string): void;
+    /** Режим выбора */
+    selectionMode?: typeof SELECTION_MODE.Single;
+} | {
+    /** Начальное состояние */
+    defaultValue?: string[];
+    /** Controlled состояние */
+    value?: string[];
+    /** Controlled обработчик измения состояния */
+    onChange?(value: (string[] | undefined) | string[]): void;
+    /** Режим выбора */
+    selectionMode?: typeof SELECTION_MODE.Multiple;
+}>;
+export declare function ToggleGroup({ children, value: valueProp, onChange: onChangeProp, selectionMode, defaultValue, }: ToggleGroupProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/ToggleGroup/hooks.d.ts

@@ -0,0 +1,9 @@
+type UseToggleGroupProps = {
+    value: string;
+};
+export declare function useToggleGroup({ value: itemValue }: UseToggleGroupProps): {
+    isChecked: boolean;
+    handleClick: () => void;
+    multipleSelection: boolean;
+};
+export {};

package/dist/esm/components/ToggleGroup/index.js

@@ -0,0 +1,2 @@
+export * from './ToggleGroup';
+export * from './hooks';

package/dist/esm/components/TogglePrivate/TogglePrivate.d.ts

@@ -0,0 +1,20 @@
+export declare const TogglePrivate: import("react").ForwardRefExoticComponent<{
+    'data-test-id'?: string;
+} & import("react").AriaAttributes & {
+    className?: string;
+    size?: import("../../types").Size;
+    render: (visualState: import("../../types").InputVisualState) => import("react").ReactNode;
+    mode?: import("../../types").Mode;
+    id?: string;
+    value?: string;
+    name?: string;
+    tabIndex?: number;
+    autofocus?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    onChange?: (checked: boolean) => void;
+    onClick?: import("react").MouseEventHandler<HTMLInputElement>;
+    onBlur?: import("react").FocusEventHandler<HTMLInputElement>;
+    onFocus?: import("react").FocusEventHandler<HTMLInputElement>;
+} & import("react").RefAttributes<HTMLInputElement>>;

package/dist/esm/components/TogglePrivate/index.js

@@ -0,0 +1 @@
+export * from './TogglePrivate';

package/dist/esm/components/index.js

@@ -0,0 +1,5 @@
+export * from './Checkbox';
+export * from './Switch';
+export * from './Radio';
+export * from './Favorite';
+export * from './ToggleGroup';

package/dist/esm/constants.d.ts

@@ -0,0 +1,16 @@
+export declare const MODE: {
+    readonly Checkbox: "checkbox";
+    readonly Radio: "radio";
+};
+export declare const SIZE: {
+    readonly S: "s";
+    readonly M: "m";
+};
+export declare const FAVORITE_ICON: {
+    readonly Star: "star";
+    readonly Heart: "heart";
+};
+export declare const SELECTION_MODE: {
+    readonly Single: "single";
+    readonly Multiple: "multiple";
+};

package/dist/esm/context.d.ts

@@ -0,0 +1,9 @@
+import { SelectionMode } from './types';
+type ToggleGroupContextType = {
+    value: string | undefined | string[];
+    onChange: ((id: string) => void) | undefined;
+    selectionMode: SelectionMode;
+};
+export declare const ToggleGroupContext: import("react").Context<ToggleGroupContextType>;
+export declare const useToggleGroupContext: () => ToggleGroupContextType;
+export {};

package/dist/esm/helperComponents/Spinner/Spinner.d.ts

@@ -0,0 +1 @@
+export declare function Spinner(): import("react/jsx-runtime").JSX.Element;

package/dist/esm/helperComponents/index.d.ts

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/esm/helperComponents/index.js

@@ -0,0 +1 @@
+export * from './Spinner';

package/dist/esm/index.js

@@ -0,0 +1 @@
+export * from './components';

package/dist/esm/types.d.ts

@@ -0,0 +1,51 @@
+import { FocusEventHandler, MouseEventHandler, ReactNode, RefObject } from 'react';
+import { ValueOf, WithSupportProps } from '@snack-uikit/utils';
+import { FAVORITE_ICON, MODE, SELECTION_MODE, SIZE } from './constants';
+export type Size = ValueOf<typeof SIZE>;
+export type Mode = ValueOf<typeof MODE>;
+export type SelectionMode = ValueOf<typeof SELECTION_MODE>;
+export type FavoriteIcon = ValueOf<typeof FAVORITE_ICON>;
+export type InputVisualState = {
+    focusVisible: boolean;
+    disabled: boolean;
+    checked: boolean;
+    hover: boolean;
+    size: Size;
+};
+export type DataAttributes = Record<`data-${string}`, string | boolean>;
+export type TogglePrivateProps = WithSupportProps<{
+    className?: string;
+    /** Размер */
+    size?: Size;
+    /** Колбек рендера компонента */
+    render: (visualState: InputVisualState) => ReactNode;
+    /** Режим работы */
+    mode?: Mode;
+    /** HTML-аттрибут id */
+    id?: string;
+    /** HTML-аттрибут value */
+    value?: string;
+    /** HTML-аттрибут name */
+    name?: string;
+    /** HTML-аттрибут tab-index */
+    tabIndex?: number;
+    /** HTML-аттрибут autofocus */
+    autofocus?: boolean;
+    /** HTML-аттрибут checked */
+    checked?: boolean;
+    /** HTML-аттрибут checked по-умолчанию */
+    defaultChecked?: boolean;
+    /** HTML-аттрибут disabled */
+    disabled?: boolean;
+    /** Колбек смены значения */
+    onChange?: (checked: boolean) => void;
+    /** Колбек клика */
+    onClick?: MouseEventHandler<HTMLInputElement>;
+    /** Колбек потери фокуса */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
+    /** Колбек приобретения фокуса */
+    onFocus?: FocusEventHandler<HTMLInputElement>;
+}>;
+export type ToggleProps = WithSupportProps<Pick<TogglePrivateProps, 'id' | 'name' | 'value' | 'tabIndex' | 'autofocus' | 'checked' | 'defaultChecked' | 'disabled' | 'onChange' | 'onClick' | 'onBlur' | 'onFocus' | 'className' | 'size'> & {
+    inputRef?: RefObject<HTMLInputElement>;
+}>;

package/dist/esm/utils.d.ts

@@ -0,0 +1,3 @@
+import { DataAttributes, Size } from './types';
+export declare function getVisualStateAttributes(state: Record<string, string | boolean>): DataAttributes;
+export declare function getIconSize(size?: Size): 16 | 24;

package/package.json

@@ -4,15 +4,16 @@
     "access": "public"
   },
   "title": "Toggles",
-  "version": "0.10.4",
+  "version": "0.10.5-preview-d96c83e8.0",
   "sideEffects": [
     "*.css",
     "*.woff",
     "*.woff2"
   ],
   "description": "",
-  "main": "./dist/index.js",
-  "module": "./dist/index.js",
+  "types": "./dist/esm/index.d.ts",
+  "main": "./dist/cjs/index.js",
+  "module": "./dist/esm/index.js",
   "homepage": "https://github.com/cloud-ru-tech/snack-uikit/tree/master/packages/toggles",
   "repository": {
     "type": "git",
@@ -24,7 +25,8 @@
     "Сергей Хлупин <svhlupin@cloud.ru>"
   ],
   "files": [
-    "dist",
+    "dist/cjs",
+    "dist/esm",
     "src",
     "./CHANGELOG.md",
     "./LICENSE"
@@ -32,11 +34,11 @@
   "license": "Apache-2.0",
   "scripts": {},
   "dependencies": {
-    "@snack-uikit/icons": "0.22.1",
-    "@snack-uikit/utils": "3.4.0",
+    "@snack-uikit/icons": "0.22.2-preview-d96c83e8.0",
+    "@snack-uikit/utils": "3.4.1-preview-d96c83e8.0",
     "classnames": "2.3.2",
     "merge-refs": "1.2.1",
     "uncontrollable": "8.0.0"
   },
-  "gitHead": "f9212fe04b0dbba9bedea1bb3a034ab612287841"
+  "gitHead": "7ad2685e79ccef7528ade40fe4e2a5d4e609a22f"
 }

package/dist/components/Checkbox/styles.module.css

@@ -1,89 +0,0 @@
-.container{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-}
-.container[data-size=s]{
-  width:var(--size-toggles-s-container, 16px);
-  height:var(--size-toggles-s-container, 16px);
-  border-radius:var(--radius-toggles-s-box-checkbox, 6px);
-  border-width:var(--border-width-toggles-single, 2px);
-}
-.container[data-size=m]{
-  width:var(--size-toggles-m-container, 24px);
-  height:var(--size-toggles-m-container, 24px);
-  border-radius:var(--radius-toggles-m-box-checkbox, 8px);
-  border-width:var(--border-width-toggles-single, 2px);
-}
-.container[data-focusvisible=true]{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-}
-.container[data-focusvisible=true][data-size=s]{
-  outline-offset:var(--border-width-state-focus-s, 2px);
-}
-
-.box{
-  box-sizing:border-box;
-  background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-neutral-decor-activated, #bec2cf);
-  border-style:solid;
-}
-.box[data-checked=false][data-focusvisible=true], .box[data-checked=false][data-hover=true]{
-  background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-neutral-accent-hovered, #6d707f);
-}
-.box[data-checked=false][data-disabled=true]{
-  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.box[data-indeterminate=true], .box[data-checked=true]{
-  background-color:var(--sys-primary-accent-default, #794ed3);
-  border-color:var(--sys-primary-accent-default, #794ed3);
-}
-.box[data-indeterminate=true][data-focusvisible=true], .box[data-indeterminate=true][data-hover=true], .box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
-  background-color:var(--sys-primary-accent-hovered, #6851a6);
-  border-color:var(--sys-primary-accent-hovered, #6851a6);
-}
-.box[data-indeterminate=true][data-disabled=true], .box[data-checked=true][data-disabled=true]{
-  background-color:var(--sys-neutral-text-disabled, #aaaebd);
-  border-color:var(--sys-neutral-text-disabled, #aaaebd);
-}
-.box[data-size=s]{
-  width:var(--size-toggles-s-container, 16px);
-  height:var(--size-toggles-s-container, 16px);
-  border-width:var(--border-width-toggles-single, 2px);
-  border-radius:var(--radius-toggles-s-box-checkbox, 6px);
-}
-.box[data-size=s] svg{
-  width:var(--size-icon-container-xs, 16px) !important;
-  height:var(--size-icon-container-xs, 16px) !important;
-}
-.box[data-size=m]{
-  width:var(--size-toggles-m-box-checkbox, 20px);
-  height:var(--size-toggles-m-box-checkbox, 20px);
-  border-width:var(--border-width-toggles-single, 2px);
-  border-radius:var(--radius-toggles-m-box-checkbox, 8px);
-}
-.box[data-size=m] svg{
-  width:var(--size-icon-container-s, 24px) !important;
-  height:var(--size-icon-container-s, 24px) !important;
-}
-
-.icon{
-  position:absolute;
-  top:0;
-  left:0;
-  display:none;
-  width:100%;
-  height:100%;
-  color:var(--sys-primary-on-accent, #fdfbff);
-}
-.icon[data-indeterminate=true], .icon[data-checked=true]{
-  display:block;
-}
-.icon[data-disabled=true]{
-  color:var(--sys-neutral-decor-disabled, #e6e8ef);
-}

package/dist/components/Favorite/styles.module.css

@@ -1,50 +0,0 @@
-.container{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-.container[data-size=s]{
-  width:var(--size-toggles-s-container, 16px);
-  height:var(--size-toggles-s-container, 16px);
-  border-radius:var(--radius-toggles-s-box-checkbox, 6px);
-}
-.container[data-size=m]{
-  width:var(--size-toggles-m-container, 24px);
-  height:var(--size-toggles-m-container, 24px);
-  border-radius:var(--radius-toggles-m-box-checkbox, 8px);
-}
-.container[data-focusvisible=true]{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-}
-.container[data-focusvisible=true][data-size=s]{
-  outline-offset:var(--border-width-state-focus-s, 2px);
-}
-.container[data-checked=true]{
-  outline-color:var(--sys-available-complementary, #1c1c24);
-}
-
-.icon{
-  color:var(--sys-neutral-text-light, #8b8e9b);
-}
-.icon:not([data-disabled=true])[data-hover=true]{
-  color:var(--sys-neutral-text-support, #6d707f);
-}
-.icon:not([data-disabled=true])[data-icon=star][data-checked=true]{
-  color:var(--sys-yellow-accent-default, #e2b134);
-}
-.icon:not([data-disabled=true])[data-icon=star][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=star][data-checked=true][data-hover=true]{
-  color:var(--sys-yellow-accent-hovered, #d5a133);
-}
-.icon:not([data-disabled=true])[data-icon=heart][data-checked=true]{
-  color:var(--sys-red-accent-default, #cb3f3e);
-}
-.icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-focusvisible=true], .icon:not([data-disabled=true])[data-icon=heart][data-checked=true][data-hover=true]{
-  color:var(--sys-red-accent-hovered, #bd4844);
-}
-.icon[data-disabled=true]{
-  color:var(--sys-neutral-text-disabled, #aaaebd);
-}

package/dist/components/Radio/styles.module.css

@@ -1,90 +0,0 @@
-.container{
-  display:flex;
-  align-items:center;
-  justify-content:center;
-  box-sizing:border-box;
-}
-.container[data-size=s]{
-  width:var(--size-toggles-s-container, 16px);
-  height:var(--size-toggles-s-container, 16px);
-  border-radius:var(--radius-toggles-s-box-radio, 16px);
-  border-width:var(--border-width-toggles-single, 2px);
-}
-.container[data-size=m]{
-  width:var(--size-toggles-m-container, 24px);
-  height:var(--size-toggles-m-container, 24px);
-  border-radius:var(--radius-toggles-m-box-radio, 16px);
-  border-width:var(--border-width-toggles-single, 2px);
-}
-.container[data-focusvisible=true]{
-  outline-width:var(--border-state-focus-s-border-width, 2px);
-  outline-style:var(--border-state-focus-s-border-style, solid);
-  outline-color:var(--border-state-focus-s-border-color, );
-}
-.container[data-focusvisible=true][data-size=s]{
-  outline-offset:var(--border-width-state-focus-s, 2px);
-}
-
-.box{
-  position:relative;
-  box-sizing:border-box;
-  background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-neutral-decor-activated, #bec2cf);
-  border-style:solid;
-}
-.box[data-size=s]{
-  width:var(--size-toggles-s-box-radio, 16px);
-  height:var(--size-toggles-s-box-radio, 16px);
-  border-width:var(--border-width-toggles-single, 2px);
-  border-radius:var(--radius-toggles-s-box-radio, 16px);
-}
-.box[data-size=m]{
-  width:var(--size-toggles-m-box-radio, 20px);
-  height:var(--size-toggles-m-box-radio, 20px);
-  border-width:var(--border-width-toggles-single, 2px);
-  border-radius:var(--radius-toggles-m-box-radio, 16px);
-}
-.box[data-focusvisible=true], .box[data-hover=true]{
-  background-color:var(--sys-neutral-background2-level, #ffffff);
-  border-color:var(--sys-neutral-accent-hovered, #6d707f);
-}
-.box[data-disabled=true]{
-  background-color:var(--sys-neutral-decor-disabled, #e6e8ef);
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-.box[data-checked=true]{
-  border-color:var(--sys-primary-accent-default, #794ed3);
-}
-.box[data-checked=true][data-focusvisible=true], .box[data-checked=true][data-hover=true]{
-  border-color:var(--sys-primary-accent-hovered, #6851a6);
-}
-.box[data-checked=true][data-disabled=true]{
-  border-color:var(--sys-neutral-decor-default, #dde0ea);
-}
-
-.flag{
-  position:absolute;
-  top:50%;
-  left:50%;
-  transform:translate(-50%, -50%);
-  background-color:var(--sys-primary-accent-default, #794ed3);
-}
-.flag[data-hover=true]{
-  background-color:var(--sys-primary-accent-hovered, #6851a6);
-}
-.flag[data-disabled=true]{
-  background-color:var(--sys-neutral-text-disabled, #aaaebd);
-}
-.flag[data-checked=false]{
-  display:none;
-}
-.flag[data-size=s]{
-  border-radius:var(--radius-toggles-s-box-radio, 16px);
-  width:var(--size-toggles-s-flag-radio, 8px);
-  height:var(--size-toggles-s-flag-radio, 8px);
-}
-.flag[data-size=m]{
-  border-radius:var(--radius-toggles-m-box-radio, 16px);
-  width:var(--size-toggles-m-flag-radio, 12px);
-  height:var(--size-toggles-m-flag-radio, 12px);
-}