braid-design-system 32.16.0 → 32.16.2

package/dist/lib/components/Textarea/formatRanges.mjs

@@ -0,0 +1,42 @@
+import { jsx } from "react/jsx-runtime";
+import parseHighlights from "autosuggest-highlight/parse/index.js";
+import { Highlight } from "./Highlight/Highlight.mjs";
+const formatRanges = (value, highlightRanges, tone) => {
+  if (highlightRanges && value) {
+    let lastEnd = 0;
+    const validatedAndSortedRanges = highlightRanges.sort((a, b) => a.start > b.start ? 1 : -1).reduce((acc, { end, start }) => {
+      const resolvedEnd = end || value.length;
+      if (resolvedEnd <= start) {
+        return acc;
+      }
+      const adjustedRange = [];
+      if (resolvedEnd > lastEnd) {
+        adjustedRange.push({
+          // if overlapping, start from end of last range otherwise start from specified range
+          start: start < lastEnd ? lastEnd : start,
+          end
+        });
+        lastEnd = resolvedEnd;
+      }
+      return [...acc, ...adjustedRange];
+    }, []);
+    return parseHighlights(
+      value,
+      validatedAndSortedRanges.map(({ start, end }) => [
+        start,
+        end || value.length
+      ])
+    ).reduce((acc, { text, highlight }, i) => {
+      if (text) {
+        acc.push(
+          highlight ? /* @__PURE__ */ jsx(Highlight, { tone, children: text }, i) : text
+        );
+      }
+      return acc;
+    }, []);
+  }
+  return [value];
+};
+export {
+  formatRanges
+};

package/dist/lib/components/ThemeNameConsumer/ThemeNameConsumer.cjs

@@ -0,0 +1,4 @@
+"use strict";
+const lib_components_useThemeName_useThemeName_cjs = require("../useThemeName/useThemeName.cjs");
+const ThemeNameConsumer = ({ children }) => children(lib_components_useThemeName_useThemeName_cjs.useThemeName());
+exports.ThemeNameConsumer = ThemeNameConsumer;

package/dist/lib/components/ThemeNameConsumer/ThemeNameConsumer.mjs

@@ -0,0 +1,5 @@
+import { useThemeName } from "../useThemeName/useThemeName.mjs";
+const ThemeNameConsumer = ({ children }) => children(useThemeName());
+export {
+  ThemeNameConsumer
+};

package/dist/lib/components/Tiles/Tiles.cjs

@@ -0,0 +1,69 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_utils_flattenChildren_cjs = require("../../utils/flattenChildren.cjs");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_Divider_Divider_cjs = require("../Divider/Divider.cjs");
+const lib_css_negativeMargin_negativeMargin_cjs = require("../../css/negativeMargin/negativeMargin.cjs");
+const lib_utils_resolveResponsiveProp_cjs = require("../../utils/resolveResponsiveProp.cjs");
+const lib_components_Tiles_Tiles_css_cjs = require("./Tiles.css.cjs");
+const lib_css_atoms_sprinkles_css_cjs = require("../../css/atoms/sprinkles.css.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const Tiles = ({
+  children,
+  space = "none",
+  columns = 1,
+  dividers = false,
+  data,
+  ...restProps
+}) => /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_Box_Box_cjs.Box,
+  {
+    className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("top", space),
+    ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+    children: /* @__PURE__ */ jsxRuntime.jsx(
+      lib_components_Box_Box_cjs.Box,
+      {
+        display: "flex",
+        flexWrap: "wrap",
+        className: lib_css_negativeMargin_negativeMargin_cjs.negativeMargin("left", space),
+        children: React.Children.map(lib_utils_flattenChildren_cjs.flattenChildren(children), (child, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          lib_components_Box_Box_cjs.Box,
+          {
+            minWidth: 0,
+            className: lib_utils_resolveResponsiveProp_cjs.resolveResponsiveProp(
+              columns,
+              lib_components_Tiles_Tiles_css_cjs.columnsMobile,
+              lib_components_Tiles_Tiles_css_cjs.columnsTablet,
+              lib_components_Tiles_Tiles_css_cjs.columnsDesktop,
+              lib_components_Tiles_Tiles_css_cjs.columnsWide
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsxs(
+              lib_components_Box_Box_cjs.Box,
+              {
+                height: "full",
+                paddingTop: space,
+                paddingLeft: space,
+                children: [
+                  dividers && i > 0 ? /* @__PURE__ */ jsxRuntime.jsx(
+                    lib_components_Box_Box_cjs.Box,
+                    {
+                      paddingBottom: space,
+                      display: lib_css_atoms_sprinkles_css_cjs.mapResponsiveValue(
+                        columns,
+                        (column) => column === 1 ? "block" : "none"
+                      ),
+                      children: typeof dividers === "string" ? /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, { weight: dividers }) : /* @__PURE__ */ jsxRuntime.jsx(lib_components_Divider_Divider_cjs.Divider, {})
+                    }
+                  ) : null,
+                  child
+                ]
+              }
+            )
+          }
+        ))
+      }
+    )
+  }
+);
+exports.Tiles = Tiles;

package/dist/lib/components/Tiles/Tiles.css.cjs

@@ -0,0 +1,27 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const lib_css_responsiveStyle_cjs = require("../../css/responsiveStyle.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/Tiles/Tiles.css.ts", "braid-design-system");
+const columnsWidths = {
+  1: "100%",
+  2: `${100 / 2}%`,
+  3: `${100 / 3}%`,
+  4: `${100 / 4}%`,
+  5: `${100 / 5}%`,
+  6: `${100 / 6}%`
+};
+const makeColumnsAtoms = (breakpoint) => css.styleVariants(columnsWidths, (width) => lib_css_responsiveStyle_cjs.responsiveStyle({
+  [breakpoint]: {
+    flex: `0 0 ${width}`
+  }
+}), `columns_${breakpoint}`);
+const columnsMobile = makeColumnsAtoms("mobile");
+const columnsTablet = makeColumnsAtoms("tablet");
+const columnsDesktop = makeColumnsAtoms("desktop");
+const columnsWide = makeColumnsAtoms("wide");
+__vanilla_filescope__.endFileScope();
+exports.columnsDesktop = columnsDesktop;
+exports.columnsMobile = columnsMobile;
+exports.columnsTablet = columnsTablet;
+exports.columnsWide = columnsWide;

package/dist/lib/components/Tiles/Tiles.mjs

@@ -0,0 +1,70 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Children } from "react";
+import { flattenChildren } from "../../utils/flattenChildren.mjs";
+import { Box } from "../Box/Box.mjs";
+import { Divider } from "../Divider/Divider.mjs";
+import { negativeMargin } from "../../css/negativeMargin/negativeMargin.mjs";
+import { resolveResponsiveProp } from "../../utils/resolveResponsiveProp.mjs";
+import { columnsWide, columnsDesktop, columnsTablet, columnsMobile } from "./Tiles.css.mjs";
+import { mapResponsiveValue } from "../../css/atoms/sprinkles.css.mjs";
+import { buildDataAttributes } from "../private/buildDataAttributes.mjs";
+const Tiles = ({
+  children,
+  space = "none",
+  columns = 1,
+  dividers = false,
+  data,
+  ...restProps
+}) => /* @__PURE__ */ jsx(
+  Box,
+  {
+    className: negativeMargin("top", space),
+    ...buildDataAttributes({ data, validateRestProps: restProps }),
+    children: /* @__PURE__ */ jsx(
+      Box,
+      {
+        display: "flex",
+        flexWrap: "wrap",
+        className: negativeMargin("left", space),
+        children: Children.map(flattenChildren(children), (child, i) => /* @__PURE__ */ jsx(
+          Box,
+          {
+            minWidth: 0,
+            className: resolveResponsiveProp(
+              columns,
+              columnsMobile,
+              columnsTablet,
+              columnsDesktop,
+              columnsWide
+            ),
+            children: /* @__PURE__ */ jsxs(
+              Box,
+              {
+                height: "full",
+                paddingTop: space,
+                paddingLeft: space,
+                children: [
+                  dividers && i > 0 ? /* @__PURE__ */ jsx(
+                    Box,
+                    {
+                      paddingBottom: space,
+                      display: mapResponsiveValue(
+                        columns,
+                        (column) => column === 1 ? "block" : "none"
+                      ),
+                      children: typeof dividers === "string" ? /* @__PURE__ */ jsx(Divider, { weight: dividers }) : /* @__PURE__ */ jsx(Divider, {})
+                    }
+                  ) : null,
+                  child
+                ]
+              }
+            )
+          }
+        ))
+      }
+    )
+  }
+);
+export {
+  Tiles
+};

package/dist/lib/components/Tiles/Tiles.playroom.cjs

@@ -0,0 +1,13 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const lib_playroom_cleanSpaceValue_cjs = require("../../playroom/cleanSpaceValue.cjs");
+const lib_components_Tiles_Tiles_cjs = require("./Tiles.cjs");
+const Tiles = ({ space, columns, ...restProps }) => /* @__PURE__ */ jsxRuntime.jsx(
+  lib_components_Tiles_Tiles_cjs.Tiles,
+  {
+    space: lib_playroom_cleanSpaceValue_cjs.cleanSpaceValue(space) || "none",
+    columns: typeof columns === "boolean" || !columns ? 1 : columns,
+    ...restProps
+  }
+);
+exports.Tiles = Tiles;

package/dist/lib/components/Tiles/Tiles.playroom.mjs

@@ -0,0 +1,14 @@
+import { jsx } from "react/jsx-runtime";
+import { cleanSpaceValue } from "../../playroom/cleanSpaceValue.mjs";
+import { Tiles as Tiles$1 } from "./Tiles.mjs";
+const Tiles = ({ space, columns, ...restProps }) => /* @__PURE__ */ jsx(
+  Tiles$1,
+  {
+    space: cleanSpaceValue(space) || "none",
+    columns: typeof columns === "boolean" || !columns ? 1 : columns,
+    ...restProps
+  }
+);
+export {
+  Tiles
+};

package/dist/lib/components/Toggle/Toggle.cjs

@@ -0,0 +1,163 @@
+"use strict";
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const lib_components_Box_Box_cjs = require("../Box/Box.cjs");
+const lib_components_private_FieldOverlay_FieldOverlay_cjs = require("../private/FieldOverlay/FieldOverlay.cjs");
+const lib_components_Text_Text_cjs = require("../Text/Text.cjs");
+const lib_components_private_touchable_virtualTouchable_cjs = require("../private/touchable/virtualTouchable.cjs");
+const lib_components_Box_BackgroundContext_cjs = require("../Box/BackgroundContext.cjs");
+const lib_components_private_buildDataAttributes_cjs = require("../private/buildDataAttributes.cjs");
+const lib_components_Toggle_Toggle_css_cjs = require("./Toggle.css.cjs");
+const lib_components_icons_IconTick_IconTick_cjs = require("../icons/IconTick/IconTick.cjs");
+const handleChange = (onChange) => (event) => {
+  if (typeof onChange === "function") {
+    onChange(event.target.checked);
+  }
+};
+const Toggle = React.forwardRef(
+  ({
+    id,
+    on,
+    onChange,
+    label,
+    align = "left",
+    size = "standard",
+    data,
+    ...restProps
+  }, forwardedRef) => {
+    const lightness = lib_components_Box_BackgroundContext_cjs.useBackgroundLightness();
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      lib_components_Box_Box_cjs.Box,
+      {
+        position: "relative",
+        zIndex: 0,
+        display: "flex",
+        flexDirection: align === "left" ? void 0 : "rowReverse",
+        className: lib_components_Toggle_Toggle_css_cjs.root,
+        ...lib_components_private_buildDataAttributes_cjs.buildDataAttributes({ data, validateRestProps: restProps }),
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "input",
+              type: "checkbox",
+              id,
+              checked: on,
+              onChange: handleChange(onChange),
+              position: "absolute",
+              zIndex: 1,
+              cursor: "pointer",
+              opacity: 0,
+              className: [
+                lib_components_Toggle_Toggle_css_cjs.realField,
+                lib_components_Toggle_Toggle_css_cjs.realFieldPosition[size],
+                lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
+              ],
+              ref: forwardedRef
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs(
+            lib_components_Box_Box_cjs.Box,
+            {
+              position: "relative",
+              display: "flex",
+              alignItems: "center",
+              flexShrink: 0,
+              className: [
+                lib_components_Toggle_Toggle_css_cjs.slideContainer,
+                lib_components_Toggle_Toggle_css_cjs.slideContainerSize[size],
+                lib_components_Toggle_Toggle_css_cjs.fieldSize[size]
+              ],
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lib_components_Box_Box_cjs.Box,
+                  {
+                    position: "absolute",
+                    width: "full",
+                    overflow: "hidden",
+                    borderRadius: "full",
+                    className: [
+                      lib_components_Toggle_Toggle_css_cjs.slideTrack[size],
+                      lib_components_Toggle_Toggle_css_cjs.slideTrackMask,
+                      lib_components_Toggle_Toggle_css_cjs.slideTrackBgLightMode[lightness.lightMode],
+                      lib_components_Toggle_Toggle_css_cjs.slideTrackBgDarkMode[lightness.darkMode]
+                    ],
+                    children: /* @__PURE__ */ jsxRuntime.jsx(
+                      lib_components_Box_Box_cjs.Box,
+                      {
+                        position: "absolute",
+                        width: "full",
+                        height: "full",
+                        background: "formAccent",
+                        transition: "fast",
+                        className: lib_components_Toggle_Toggle_css_cjs.slideTrackSelected
+                      }
+                    )
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  lib_components_Box_Box_cjs.Box,
+                  {
+                    position: "absolute",
+                    background: "surface",
+                    transition: "fast",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    borderRadius: "full",
+                    className: lib_components_Toggle_Toggle_css_cjs.slider[size],
+                    children: [
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                        {
+                          variant: on ? "formAccent" : "default",
+                          borderRadius: "full",
+                          visible: true,
+                          className: {
+                            [lib_components_Toggle_Toggle_css_cjs.hideBorderOnDarkBackgroundInLightMode]: lightness.lightMode === "dark"
+                          }
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay, { className: lib_components_Toggle_Toggle_css_cjs.icon, children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_icons_IconTick_IconTick_cjs.IconTick, { tone: "formAccent", size: "fill" }) }),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                        {
+                          variant: "focus",
+                          borderRadius: "full",
+                          className: lib_components_Toggle_Toggle_css_cjs.focusOverlay
+                        }
+                      ),
+                      /* @__PURE__ */ jsxRuntime.jsx(
+                        lib_components_private_FieldOverlay_FieldOverlay_cjs.FieldOverlay,
+                        {
+                          variant: "formAccent",
+                          borderRadius: "full",
+                          className: !on ? lib_components_Toggle_Toggle_css_cjs.hoverOverlay : void 0
+                        }
+                      )
+                    ]
+                  }
+                )
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            lib_components_Box_Box_cjs.Box,
+            {
+              component: "label",
+              htmlFor: id,
+              paddingLeft: align === "left" ? "xsmall" : void 0,
+              paddingRight: align === "right" || align === "justify" ? "xsmall" : void 0,
+              flexGrow: align === "justify" ? 1 : void 0,
+              userSelect: "none",
+              cursor: "pointer",
+              className: [lib_components_Toggle_Toggle_css_cjs.label[size], lib_components_private_touchable_virtualTouchable_cjs.virtualTouchable()],
+              children: /* @__PURE__ */ jsxRuntime.jsx(lib_components_Text_Text_cjs.Text, { baseline: false, weight: on ? "strong" : void 0, size, children: label })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+exports.Toggle = Toggle;

package/dist/lib/components/Toggle/Toggle.css.cjs

@@ -0,0 +1,152 @@
+"use strict";
+const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
+const css = require("@vanilla-extract/css");
+const cssUtils = require("@vanilla-extract/css-utils");
+const lib_themes_vars_css_cjs = require("../../themes/vars.css.cjs");
+const lib_components_private_touchable_hitArea_cjs = require("../private/touchable/hitArea.cjs");
+const lib_components_private_touchable_debugTouchable_cjs = require("../private/touchable/debugTouchable.cjs");
+const polished = require("polished");
+const lib_css_colorModeStyle_cjs = require("../../css/colorModeStyle.cjs");
+__vanilla_filescope__.setFileScope("src/lib/components/Toggle/Toggle.css.ts", "braid-design-system");
+const sizes = {
+  standard: "standard",
+  small: "small"
+};
+const toggleWidthRatio = 1.6;
+const root = css.style({
+  ":hover": {
+    zIndex: 1
+  }
+}, "root");
+const realField = css.style([{
+  height: lib_components_private_touchable_hitArea_cjs.hitArea
+}, lib_components_private_touchable_debugTouchable_cjs.debugTouchable()], "realField");
+const realFieldPosition = css.styleVariants(sizes, (size) => ({
+  top: cssUtils.calc(lib_components_private_touchable_hitArea_cjs.hitArea).subtract(lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).divide(2).negate().toString()
+}), "realFieldPosition");
+const label = css.styleVariants(sizes, (size) => {
+  const padding = cssUtils.calc(lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).subtract(lib_themes_vars_css_cjs.vars.textSize.standard.mobile.lineHeight).divide(2).toString();
+  return {
+    paddingTop: padding,
+    paddingBottom: padding
+  };
+}, "label");
+const fieldSize = css.styleVariants(sizes, (size) => ({
+  width: cssUtils.calc.multiply(lib_themes_vars_css_cjs.vars.inlineFieldSize[size], toggleWidthRatio)
+}), "fieldSize");
+const slideContainer = css.style({}, "slideContainer");
+const slideContainerSize = css.styleVariants(sizes, (size) => ({
+  height: lib_themes_vars_css_cjs.vars.inlineFieldSize[size]
+}), "slideContainerSize");
+const slideTrack = css.styleVariants(sizes, (size) => ({
+  height: cssUtils.calc.subtract(lib_themes_vars_css_cjs.vars.inlineFieldSize[size], lib_themes_vars_css_cjs.vars.grid)
+}), "slideTrack");
+const slideTrackBgLightMode = css.styleVariants({
+  light: lib_css_colorModeStyle_cjs.colorModeStyle({
+    lightMode: {
+      background: polished.rgba("#000", 0.08)
+    }
+  }),
+  dark: lib_css_colorModeStyle_cjs.colorModeStyle({
+    lightMode: {
+      background: polished.rgba("#fff", 0.12)
+    }
+  })
+}, "slideTrackBgLightMode");
+const slideTrackBgDarkMode = css.styleVariants({
+  light: lib_css_colorModeStyle_cjs.colorModeStyle({
+    darkMode: {
+      background: polished.rgba("#000", 0.08)
+    }
+  }),
+  dark: lib_css_colorModeStyle_cjs.colorModeStyle({
+    darkMode: {
+      background: polished.rgba("#fff", 0.12)
+    }
+  })
+}, "slideTrackBgDarkMode");
+const slideTrackMask = css.style({
+  // Fix for Safari border-radius, overflow hidden, transform bug:
+  // https://gist.github.com/ayamflow/b602ab436ac9f05660d9c15190f4fd7b
+  WebkitMaskImage: "-webkit-radial-gradient(white, black)"
+}, "slideTrackMask");
+const slideTrackSelected = css.style({
+  selectors: {
+    [`${realField}:not(:checked) + ${slideContainer} &`]: {
+      transform: `translateX(${cssUtils.calc.negate(lib_themes_vars_css_cjs.vars.touchableSize)})`
+    }
+  }
+}, "slideTrackSelected");
+const slider = css.styleVariants(sizes, (size) => {
+  const slideDistance = cssUtils.calc(lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).multiply(toggleWidthRatio).subtract(lib_themes_vars_css_cjs.vars.inlineFieldSize[size]).toString();
+  const anticipationRatio = 0.12;
+  const anticipation = cssUtils.calc.multiply(lib_themes_vars_css_cjs.vars.inlineFieldSize[size], anticipationRatio);
+  return {
+    height: lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
+    width: lib_themes_vars_css_cjs.vars.inlineFieldSize[size],
+    selectors: {
+      [`${realField}:active + ${slideContainer} &`]: {
+        transform: `translateX(${cssUtils.calc.negate(anticipation)})`
+      },
+      [`${realField}:checked + ${slideContainer} &`]: {
+        transform: `translateX(${slideDistance})`
+      },
+      [`${realField}:active:checked + ${slideContainer} &`]: {
+        transform: `translateX(${cssUtils.calc.add(slideDistance, anticipation)})`
+      }
+    }
+  };
+}, "slider");
+const icon = css.style({
+  transform: "scale(.75)",
+  selectors: {
+    [`${realField}:active + ${slideContainer} &`]: {
+      transform: "scale(.75) rotate(-25deg)"
+    },
+    [`${realField}:checked + ${slideContainer} &`]: {
+      opacity: 1
+    },
+    [`${realField}:active:checked + ${slideContainer} &`]: {
+      transform: "scale(.75) rotate(6deg)"
+    }
+  }
+}, "icon");
+const hideBorderOnDarkBackgroundInLightMode = css.style(lib_css_colorModeStyle_cjs.colorModeStyle({
+  lightMode: {
+    opacity: 0
+  }
+}), "hideBorderOnDarkBackgroundInLightMode");
+const focusOverlay = css.style({
+  selectors: {
+    [`${realField}:focus + ${slideContainer} &,
+      ${realField}:active + ${slideContainer} &`]: {
+      opacity: 1
+    }
+  }
+}, "focusOverlay");
+const hoverOverlay = css.style({
+  selectors: {
+    [`${realField}:hover:not(:disabled) + ${slideContainer} &,
+      ${realField}:focus + ${slideContainer} &`]: {
+      opacity: 1
+    }
+  }
+}, "hoverOverlay");
+__vanilla_filescope__.endFileScope();
+exports.fieldSize = fieldSize;
+exports.focusOverlay = focusOverlay;
+exports.hideBorderOnDarkBackgroundInLightMode = hideBorderOnDarkBackgroundInLightMode;
+exports.hoverOverlay = hoverOverlay;
+exports.icon = icon;
+exports.label = label;
+exports.realField = realField;
+exports.realFieldPosition = realFieldPosition;
+exports.root = root;
+exports.slideContainer = slideContainer;
+exports.slideContainerSize = slideContainerSize;
+exports.slideTrack = slideTrack;
+exports.slideTrackBgDarkMode = slideTrackBgDarkMode;
+exports.slideTrackBgLightMode = slideTrackBgLightMode;
+exports.slideTrackMask = slideTrackMask;
+exports.slideTrackSelected = slideTrackSelected;
+exports.slider = slider;