@via-profit/ui-kit 0.4.0 → 0.6.0

package/Surface/SurfaceContent.js

@@ -17,20 +17,27 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_2 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledContent = styled_1.default.div `
   flex: 1;
-  ${({ $noPadding }) => (typeof $noPadding === 'undefined' || $noPadding === false) &&
-    (0, react_2.css) `
-      padding: 1.4rem 1rem 1rem 1rem;
-    `}
+  ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return (!$noPadding &&
+        (0, react_2.css) `
+        padding: calc(${y} * 1.4) ${x} ${y} ${x};
+      `);
+}}
 
-  ${({ $rounded, $noPadding }) => $rounded &&
-    (0, react_2.css) `
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: ${$noPadding ? '0' : '1rem'};
-    `}
+  ${({ $rounded, $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return ($rounded &&
+        (0, react_2.css) `
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        padding: ${$noPadding ? '0' : `${y} ${x}`};
+      `);
+}}
 `;
 const SurfaceContent = (props, ref) => {
     const { children, noPadding, rounded } = props, nativeProps = __rest(props, ["children", "noPadding", "rounded"]);

package/Surface/SurfaceFooter.d.ts

@@ -4,7 +4,7 @@ export type SurfaceFooterProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceFooter.js

@@ -16,11 +16,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledFooter = styled_1.default.div `
   display: flex;
   align-items: center;
   justify-content: flex-end;
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem')};
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container');
+    return $noPadding ? '0' : `${y} ${x}`;
+}};
   border-bottom-left-radius: inherit;
   border-bottom-right-radius: inherit;
 `;

package/Surface/SurfaceHeader.d.ts

@@ -4,7 +4,7 @@ export type SurfaceHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceHeader.js

@@ -16,9 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledHeader = styled_1.default.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '1rem 1rem 0 1rem')};
-  font-size: 1.3rem;
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container', 1.3);
+    return $noPadding ? '0' : `${y} ${x} 0 ${x}`;
+}};
+  font-size: 1.3em;
   font-weight: 600;
   border-top-left-radius: inherit;
   border-top-right-radius: inherit;

package/Surface/SurfaceSubheader.d.ts

@@ -4,7 +4,7 @@ export type SurfaceSubheaderProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly rounded?: boolean;
 };
 declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & {
-    readonly noPadding?: boolean | undefined;
-    readonly rounded?: boolean | undefined;
+    readonly noPadding?: boolean;
+    readonly rounded?: boolean;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/SurfaceSubheader.js

@@ -16,9 +16,13 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const StyledHeader = styled_1.default.div `
-  padding: ${({ $noPadding }) => ($noPadding ? '0' : '0.5em 1rem 0 1rem')};
-  font-size: 0.9rem;
+  padding: ${({ $noPadding, theme }) => {
+    const { y, x } = (0, tokens_1.themePadding)(theme, 'container', 0.9);
+    return $noPadding ? '0' : `calc(${y} / 2) ${x} 0 ${x}`;
+}};
+  font-size: 0.9em;
   font-weight: 200;
   color: ${({ theme }) => theme.color.textSecondary.toString()};
 `;

package/Surface/index.d.ts

@@ -9,15 +9,15 @@ export type SurfaceProps = React.HTMLAttributes<HTMLDivElement> & {
     /**
      * Header content
      */
-    readonly header?: JSX.Element | string;
+    readonly header?: React.JSX.Element | string;
     /**
      * Footer content
      */
-    readonly footer?: JSX.Element | string;
+    readonly footer?: React.JSX.Element | string;
     /**
      * Subheader content
      */
-    readonly subheader?: JSX.Element | string;
+    readonly subheader?: React.JSX.Element | string;
     /**
      * If true then surface will be inline-flex element, and the flex otherwise
      */
@@ -62,30 +62,30 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
     /**
      * Header content
      */
-    readonly header?: string | JSX.Element | undefined;
+    readonly header?: React.JSX.Element | string;
     /**
      * Footer content
      */
-    readonly footer?: string | JSX.Element | undefined;
+    readonly footer?: React.JSX.Element | string;
     /**
      * Subheader content
      */
-    readonly subheader?: string | JSX.Element | undefined;
+    readonly subheader?: React.JSX.Element | string;
     /**
      * If true then surface will be inline-flex element, and the flex otherwise
      */
-    readonly inline?: boolean | undefined;
+    readonly inline?: boolean;
     /**
      * The surface will be rounded
      */
-    readonly rounded?: boolean | undefined;
+    readonly rounded?: boolean;
     /**
      * If true then surface does not contin any paddings
      */
-    readonly noPadding?: boolean | undefined;
+    readonly noPadding?: boolean;
     /**
      * Overridable components map
      */
-    readonly overrides?: SurfaceOverrides | undefined;
+    readonly overrides?: SurfaceOverrides;
 } & React.RefAttributes<HTMLDivElement>>;
 export default _default;

package/Surface/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Swiper/Swiper.d.ts

@@ -50,32 +50,32 @@ export type SwiperProps = Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>
     readonly overrides?: SwiperOverrides;
 };
 export declare const Swiper: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
-    readonly dragThreshold?: number | undefined;
-    readonly snap?: boolean | undefined;
-    readonly draggable?: boolean | undefined;
-    readonly initialIndex?: number | undefined;
-    readonly infinite?: boolean | undefined;
-    readonly onSlideChange?: ((realIndex: number) => void) | undefined;
-    readonly autoplay?: boolean | undefined;
-    readonly autoplayInterval?: number | undefined;
-    readonly pauseOnHover?: boolean | undefined;
-    readonly threshold?: number | undefined;
-    readonly resistance?: boolean | undefined;
-    readonly slidesPerView?: number | undefined;
+    readonly dragThreshold?: number;
+    readonly snap?: boolean;
+    readonly draggable?: boolean;
+    readonly initialIndex?: number;
+    readonly infinite?: boolean;
+    readonly onSlideChange?: (realIndex: number) => void;
+    readonly autoplay?: boolean;
+    readonly autoplayInterval?: number;
+    readonly pauseOnHover?: boolean;
+    readonly threshold?: number;
+    readonly resistance?: boolean;
+    readonly slidesPerView?: number;
     /**
      * Arrow keys switch the slides when the swiper is focused\
      * **Default:** `true`
      */
-    readonly keyboardControl?: boolean | undefined;
+    readonly keyboardControl?: boolean;
     /**
      * The label of the slide for screen readers\
      * **Default:** `(index, total) => \`${index + 1} / ${total}\``
      */
-    readonly slideLabel?: ((index: number, total: number) => string) | undefined;
+    readonly slideLabel?: (index: number, total: number) => string;
     /**
      * The slides: `<SwiperSlide>` elements. `null`, `false` and other non-elements are skipped
      */
     readonly children?: React.ReactNode;
-    readonly overrides?: SwiperOverrides | undefined;
+    readonly overrides?: SwiperOverrides;
 } & React.RefAttributes<SwiperRef>>;
 export default Swiper;

package/Swiper/Swiper.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };

package/Swiper/SwiperContainer.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 export type SwiperContainerProps = React.HTMLAttributes<HTMLDivElement>;
 export declare const SwiperContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export default SwiperContainer;

package/Swiper/SwiperSlide.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Swiper/SwiperSlidesRenderer.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 const React = __importStar(require("react"));
 // React 19 supports the boolean `inert`, React 18 passes only the string value to the DOM

package/Swiper/SwiperTrack.d.ts

@@ -16,11 +16,11 @@ export declare const SwiperTrack: React.ForwardRefExoticComponent<React.HTMLAttr
     readonly index: number;
     readonly offset: number;
     readonly dragging: boolean;
-    readonly disableAnimation?: boolean | undefined;
+    readonly disableAnimation?: boolean;
     /**
      * The long decelerating transition after a free swipe (snap=false)
      */
-    readonly momentum?: boolean | undefined;
+    readonly momentum?: boolean;
     readonly slidesPerView: number;
 } & React.RefAttributes<HTMLDivElement>>;
 export default SwiperTrack;

package/Swiper/SwiperTrack.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Swiper/SwiperWrapper.d.ts

@@ -4,8 +4,8 @@ export type SwiperWrapperProps = React.HTMLAttributes<HTMLDivElement> & {
     readonly slidesPerView: number;
 };
 export declare const StyledWrapper: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme | undefined;
-    as?: React.ElementType<any, keyof React.JSX.IntrinsicElements> | undefined;
+    theme?: import("@emotion/react").Theme;
+    as?: React.ElementType;
 } & {
     $draggable: boolean;
 }, React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/Swiper/SwiperWrapper.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -41,6 +51,7 @@ exports.StyledWrapper = void 0;
 const React = __importStar(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const react_1 = require("@emotion/react");
+const tokens_1 = require("../ThemeProvider/tokens");
 exports.StyledWrapper = styled_1.default.div `
   width: 100%;
   height: 100%;
@@ -57,6 +68,7 @@ exports.StyledWrapper = styled_1.default.div `
     outline: 0.14em solid ${({ theme }) => theme.color.accentPrimary.toString()};
     outline-offset: -0.14em;
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme)}
 `;
 const SwiperWrapper = React.forwardRef((props, ref) => {
     // slidesPerView is for the overrides only, it is not a DOM attribute

package/Switch/SwitchAsterisk.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Switch/SwitchContainer.d.ts

@@ -16,11 +16,11 @@ declare const _default: React.ForwardRefExoticComponent<React.LabelHTMLAttribute
      * This property changes position of switch and its label.
      * Default: `end`
      */
-    readonly labelPosition?: "bottom" | "top" | "end" | "start" | undefined;
+    readonly labelPosition?: "start" | "end" | "top" | "bottom";
     /**
      * if `true` switch state can not be changed
      * Default: false;
      */
-    readonly disabled?: boolean | undefined;
+    readonly disabled?: boolean;
 } & React.RefAttributes<HTMLLabelElement>>;
 export default _default;

package/Switch/SwitchDot.d.ts

@@ -12,6 +12,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * This prop allows you to provide switch state and control it. This property overrides internal component state
      */
     readonly checked: boolean;
-    readonly color?: string | undefined;
+    readonly color?: SwitchProps["color"];
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;

package/Switch/SwitchDot.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
 const useSwitchColor_1 = __importDefault(require("./useSwitchColor"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const ToggleContainer = styled_1.default.span `
   display: inline-flex;
   align-items: center;
@@ -41,10 +42,7 @@ const Dot = styled_1.default.span `
   width: 1.4rem;
   height: 1.4rem;
   border-radius: 50%;
-  box-shadow:
-    rgba(0, 0, 0, 0.2) 0px 2px 1px -1px,
-    rgba(0, 0, 0, 0.14) 0px 1px 1px 0px,
-    rgba(0, 0, 0, 0.12) 0px 1px 3px 0px;
+  box-shadow: ${({ theme }) => (0, tokens_1.elevation)(theme, 'control')};
   background-color: ${({ $color, $checked, theme }) => {
     switch (true) {
         case $checked:

package/Switch/SwitchErrorText.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)

package/Switch/SwitchToggleWrapper.js

@@ -16,6 +16,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const react_1 = __importDefault(require("react"));
 const styled_1 = __importDefault(require("@emotion/styled"));
+const tokens_1 = require("../ThemeProvider/tokens");
 const ToggleWrapper = styled_1.default.span `
   font-size: 0.86em;
   display: inline-flex;
@@ -46,6 +47,7 @@ const StyledInput = styled_1.default.input `
   &:focus-visible ~ [data-switch-thumb] [data-switch-dot]:before {
     transform: translate(-50%, -50%) scale(1.7);
   }
+  ${({ theme }) => (0, tokens_1.themeFocusRing)(theme, '&:focus-visible + *')}
 `;
 const SwitchToggleWrapper = (props, ref) => {
     const { children, disabled } = props, nativeProps = __rest(props, ["children", "disabled"]);

package/Switch/SwitchTrack.d.ts

@@ -12,6 +12,6 @@ declare const _default: React.ForwardRefExoticComponent<React.HTMLAttributes<HTM
      * This prop allows you to provide switch state and control it. This property overrides internal component state
      */
     readonly checked: boolean;
-    readonly color?: string | undefined;
+    readonly color?: SwitchProps["color"];
 } & React.RefAttributes<HTMLSpanElement>>;
 export default _default;