@zendeskgarden/react-forms 9.0.0-next.2 → 9.0.0-next.21

package/dist/esm/styled/text/StyledTextInput.js

@@ -0,0 +1,152 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import React__default from 'react';
+import { renderToString } from 'react-dom/server';
+import styled, { css } from 'styled-components';
+import { math, em } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles, getLineHeight } from '@zendeskgarden/react-theming';
+import SvgChevronDownStroke from '../../node_modules/@zendeskgarden/svg-icons/src/16/chevron-down-stroke.svg.js';
+import { StyledHint } from '../common/StyledHint.js';
+import { StyledLabel } from '../common/StyledLabel.js';
+import { StyledMessage } from '../common/StyledMessage.js';
+
+const COMPONENT_ID = 'forms.input';
+const isInvalid = validation => {
+  return validation === 'warning' || validation === 'error';
+};
+const colorStyles = _ref => {
+  let {
+    theme,
+    isBare,
+    isHovered,
+    focusInset,
+    validation
+  } = _ref;
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundColor = isBare ? 'transparent' : getColor({
+    theme,
+    variable: 'background.default'
+  });
+  let borderColor;
+  let hoverBorderColor;
+  let borderVariable;
+  let focusBorderColor;
+  if (validation) {
+    if (validation === 'success') {
+      borderVariable = 'border.successEmphasis';
+    } else if (validation === 'warning') {
+      borderVariable = 'border.warningEmphasis';
+    } else if (validation === 'error') {
+      borderVariable = 'border.dangerEmphasis';
+    }
+    borderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+    hoverBorderColor = borderColor;
+    focusBorderColor = borderColor;
+  } else {
+    borderColor = getColor({
+      theme,
+      variable: 'border.default',
+      dark: {
+        offset: -100
+      },
+      light: {
+        offset: 100
+      }
+    });
+    borderVariable = 'border.primaryEmphasis';
+    hoverBorderColor = getColor({
+      theme,
+      variable: borderVariable
+    });
+    focusBorderColor = hoverBorderColor;
+  }
+  const disabledBackgroundColor = isBare ? undefined : getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  const placeholderColor = disabledForegroundColor;
+  const readOnlyBackgroundColor = disabledBackgroundColor;
+  const calendarPickerColor = getColor({
+    theme,
+    variable: 'foreground.subtle'
+  });
+  const calendarPickerIcon = renderToString( React__default.createElement(SvgChevronDownStroke, {
+    color: calendarPickerColor
+  }));
+  const calendarPickerBackgroundImage = `url("data:image/svg+xml,${encodeURIComponent(calendarPickerIcon)}")`;
+  return css(["border-color:", ";background-color:", ";color:", ";&::placeholder{opacity:1;color:", ";}&::-webkit-datetime-edit{color:", ";}&::-webkit-calendar-picker-indicator{background-image:", ";}&[readonly],&[aria-readonly='true']{background-color:", ";}&:hover{border-color:", ";}", " &::-webkit-calendar-picker-indicator:focus-visible{", "}&:disabled,&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], isHovered ? hoverBorderColor : borderColor, backgroundColor, foregroundColor, placeholderColor, placeholderColor, calendarPickerBackgroundImage, readOnlyBackgroundColor, hoverBorderColor, focusStyles({
+    theme,
+    inset: focusInset,
+    color: {
+      variable: borderVariable
+    },
+    styles: {
+      borderColor: focusBorderColor
+    },
+    condition: !isBare
+  }), focusStyles({
+    theme
+  }), disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isBare,
+    isCompact
+  } = _ref2;
+  const fontSize = theme.fontSizes.md;
+  const paddingHorizontal = `${theme.space.base * 3}px`;
+  let height;
+  let paddingVertical;
+  let browseFontSize;
+  let swatchHeight;
+  if (isCompact) {
+    height = `${theme.space.base * 8}px`;
+    paddingVertical = `${theme.space.base * 1.5}px`;
+    browseFontSize = math(`${theme.fontSizes.sm} - 1`);
+    swatchHeight = `${theme.space.base * 6}px`;
+  } else {
+    height = `${theme.space.base * 10}px`;
+    paddingVertical = `${theme.space.base * 2.5}px`;
+    browseFontSize = theme.fontSizes.sm;
+    swatchHeight = `${theme.space.base * 7}px`;
+  }
+  const lineHeight = math(`${height} - (${paddingVertical} * 2) - (${theme.borderWidths.sm} * 2)`);
+  const padding = isBare ? '0' : `${em(paddingVertical, fontSize)} ${em(paddingHorizontal, fontSize)}`;
+  const swatchMarginVertical = math(`(${lineHeight} - ${swatchHeight}) / 2`);
+  const swatchMarginHorizontal = math(`${paddingVertical} + ${swatchMarginVertical} - ${paddingHorizontal}`);
+  const calendarPickerSize = `${theme.space.base * 5}px`;
+  const calendarPickerBackgroundSize = theme.iconSizes.md;
+  return css(["padding:", ";min-height:", ";line-height:", ";font-size:", ";&::-ms-browse{font-size:", ";}&[type='date'],&[type='datetime-local'],&[type='file'],&[type='month'],&[type='time'],&[type='week']{max-height:", ";}&[type='file']{line-height:1;}@supports (-ms-ime-align:auto){&[type='color']{padding:", ";}}&::-moz-color-swatch{margin-top:", ";margin-left:", ";width:calc(100% + ", ");height:", ";}&::-webkit-calendar-picker-indicator{background-position:center;background-size:", ";padding:0;width:", ";height:", ";}&::-webkit-color-swatch{margin:", " ", ";}", ":not([hidden]) + &&,", " + &&,", " + &&,&& + ", ",&& ~ ", "{margin-top:", "px;}"], padding, isBare ? '1em' : height, getLineHeight(lineHeight, fontSize), fontSize, browseFontSize, height, isCompact ? '0 2px' : '1px 3px', swatchMarginVertical, swatchMarginHorizontal, math(`${swatchMarginHorizontal} * -2`), swatchHeight, calendarPickerBackgroundSize, calendarPickerSize, calendarPickerSize, swatchMarginVertical, swatchMarginHorizontal, StyledLabel, StyledHint, StyledMessage, StyledHint, StyledMessage, theme.space.base * (isCompact ? 1 : 2));
+};
+const StyledTextInput = styled.input.attrs(props => ({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  'aria-invalid': isInvalid(props.validation)
+})).withConfig({
+  displayName: "StyledTextInput",
+  componentId: "sc-1r6733h-0"
+})(["appearance:none;transition:border-color 0.25s ease-in-out,box-shadow 0.1s ease-in-out,background-color 0.25s ease-in-out,color 0.25s ease-in-out,z-index 0.25s ease-in-out;direction:", ";border:", ";border-radius:", ";width:100%;box-sizing:border-box;vertical-align:middle;font-family:inherit;&::-ms-browse{border-radius:", ";}&::-ms-clear,&::-ms-reveal{display:none;}&::-moz-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch{border:none;border-radius:", ";}&::-webkit-color-swatch-wrapper{padding:0;}&::-webkit-clear-button,&::-webkit-inner-spin-button,&::-webkit-search-cancel-button,&::-webkit-search-results-button{display:none;}&::-webkit-datetime-edit{direction:", ";line-height:1;}&::-webkit-calendar-picker-indicator{border-radius:100%;}&:invalid{box-shadow:none;}&[type='file']::-ms-value{display:none;}@media screen and (min--moz-device-pixel-ratio:0){&[type='number']{appearance:textfield;}}", ";", ";&:disabled{cursor:default;}", ";"], props => props.theme.rtl && 'rtl', props => props.isBare ? 'none' : props.theme.borders.sm, props => props.isBare ? '0' : props.theme.borderRadii.md, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.borderRadii.sm, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextInput };

package/dist/esm/styled/text/StyledTextMediaFigure.js

@@ -0,0 +1,68 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { StyledBaseIcon, retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.media_figure';
+const colorStyles = _ref => {
+  let {
+    theme,
+    $isDisabled,
+    $isHovered,
+    $isFocused
+  } = _ref;
+  let color;
+  if ($isDisabled) {
+    color = getColor({
+      theme,
+      variable: 'foreground.disabled'
+    });
+  } else {
+    const options = {
+      theme,
+      variable: 'foreground.subtle'
+    };
+    if ($isHovered || $isFocused) {
+      color = getColor({
+        ...options,
+        dark: {
+          offset: -100
+        },
+        light: {
+          offset: 100
+        }
+      });
+    } else {
+      color = getColor(options);
+    }
+  }
+  return css(["color:", ";"], color);
+};
+const sizeStyles = props => {
+  const size = props.theme.iconSizes.md;
+  const marginFirst = `1px ${props.theme.space.base * 2}px auto 0`;
+  const marginLast = `1px 0 auto ${props.theme.space.base * 2}px`;
+  let margin;
+  if (props.$position === 'start') {
+    margin = props.theme.rtl ? marginLast : marginFirst;
+  } else {
+    margin = props.theme.rtl ? marginFirst : marginLast;
+  }
+  return css(["margin:", ";width:", ";height:", ";"], margin, size, size);
+};
+const StyledTextMediaFigure = styled(StyledBaseIcon).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTextMediaFigure",
+  componentId: "sc-1qepknj-0"
+})(["transform:", ";transition:transform 0.25s ease-in-out,color 0.25s ease-in-out;", ";", " ", ";"], props => props.$isRotated && `rotate(${props.theme.rtl ? '-' : '+'}180deg)`, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextMediaFigure.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextMediaFigure };

package/dist/esm/styled/text/StyledTextMediaInput.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTextInput } from './StyledTextInput.js';
+
+const COMPONENT_ID = 'forms.media_input';
+const StyledTextMediaInput = styled(StyledTextInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21',
+  isBare: true
+}).withConfig({
+  displayName: "StyledTextMediaInput",
+  componentId: "sc-12i9xfi-0"
+})(["flex-grow:1;", ";"], props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextMediaInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextMediaInput };

package/dist/esm/styled/text/StyledTextarea.js

@@ -0,0 +1,33 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledTextInput } from './StyledTextInput.js';
+
+const COMPONENT_ID = 'forms.textarea';
+const hiddenStyles = `
+  visibility: hidden;
+  position: absolute;
+  overflow: hidden;
+  height: 0;
+  top: 0;
+  left: 0;
+  transform: translateZ(0);
+`;
+const StyledTextarea = styled(StyledTextInput).attrs({
+  as: 'textarea',
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTextarea",
+  componentId: "sc-wxschl-0"
+})(["resize:", ";overflow:auto;", ";", ";"], props => props.isResizable ? 'vertical' : 'none', props => props.isHidden && hiddenStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTextarea.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTextarea };

package/dist/esm/styled/tiles/StyledTile.js

@@ -0,0 +1,114 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor, focusStyles } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.tile';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const offset100 = {
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  };
+  const offset200 = {
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  };
+  const backgroundColor = getColor({
+    theme,
+    variable: 'background.default'
+  });
+  const borderColor = getColor({
+    theme,
+    variable: 'border.default',
+    ...offset100
+  });
+  const foregroundColor = getColor({
+    theme,
+    variable: 'foreground.default'
+  });
+  const backgroundOptions = {
+    theme,
+    variable: 'background.primaryEmphasis'
+  };
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[100]
+  });
+  const hoverBorderColor = getColor({
+    theme,
+    variable: 'border.primaryEmphasis'
+  });
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    transparency: theme.opacity[200]
+  });
+  const focusBorderColor = hoverBorderColor;
+  const activeBorderColor = hoverBorderColor;
+  const checkedBackgroundColor = getColor(backgroundOptions);
+  const checkedForegroundColor = getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const checkedHoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset100
+  });
+  const checkedActiveBackgroundColor = getColor({
+    ...backgroundOptions,
+    ...offset200
+  });
+  const disabledBackgroundColor = getColor({
+    theme,
+    variable: 'background.disabled'
+  });
+  const disabledBorderColor = getColor({
+    theme,
+    variable: 'border.disabled'
+  });
+  const disabledForegroundColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["border-color:", ";background-color:", ";color:", ";&:hover{border-color:", ";background-color:", ";}", ";&:active{border-color:", ";background-color:", ";}&:has(:checked){border-color:transparent;background-color:", ";color:", ";}&:hover:has(:checked){background-color:", ";}&:active:has(:checked){background-color:", ";}&[aria-disabled='true']{border-color:", ";background-color:", ";color:", ";}"], borderColor, backgroundColor, foregroundColor, hoverBorderColor, hoverBackgroundColor, focusStyles({
+    theme,
+    selector: '&:has(:focus-visible)',
+    styles: {
+      borderColor: focusBorderColor
+    }
+  }), activeBorderColor, activeBackgroundColor, checkedBackgroundColor, checkedForegroundColor, checkedHoverBackgroundColor, checkedActiveBackgroundColor, disabledBorderColor, disabledBackgroundColor, disabledForegroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const border = theme.borders.sm;
+  const padding = `${theme.space.base * 5}px`;
+  return css(["border:", ";padding:", ";min-width:132px;"], border, padding);
+};
+const StyledTile = styled.label.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTile",
+  componentId: "sc-1jjvmxs-0"
+})(["display:block;position:relative;transition:border-color .25s ease-in-out,box-shadow .1s ease-in-out,background-color .25s ease-in-out,color .25s ease-in-out;border-radius:", ";direction:", ";word-break:break-word;", ";", ";", ";"], props => props.theme.borderRadii.md, props => props.theme.rtl && 'rtl', sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTile.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTile };

package/dist/esm/styled/tiles/StyledTileDescription.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.tile_description';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    isCentered
+  } = _ref;
+  const marginTop = `${theme.space.base}px`;
+  const marginHorizontal = isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
+  const fontSize = theme.fontSizes.sm;
+  const lineHeight = getLineHeight(theme.space.base * 4, fontSize);
+  return css(["margin-top:", ";margin-", ":", ";line-height:", ";font-size:", ";"], marginTop, theme.rtl ? 'right' : 'left', marginHorizontal, lineHeight, fontSize);
+};
+const StyledTileDescription = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTileDescription",
+  componentId: "sc-xfuu7u-0"
+})(["display:block;text-align:", ";", ";", ";"], props => props.isCentered && 'center', sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTileDescription.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTileDescription };

package/dist/esm/styled/tiles/StyledTileIcon.js

@@ -0,0 +1,77 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { math } from 'polished';
+import { StyledTile } from './StyledTile.js';
+
+const COMPONENT_ID = 'forms.tile_icon';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const options = {
+    theme,
+    variable: 'foreground.subtle'
+  };
+  const color = getColor(options);
+  const hoverColor = getColor({
+    ...options,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeColor = getColor({
+    ...options,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  const checkedColor = getColor({
+    theme,
+    variable: 'foreground.onEmphasis'
+  });
+  const disabledColor = getColor({
+    theme,
+    variable: 'foreground.disabled'
+  });
+  return css(["color:", ";", ":hover &&{color:", ";}", ":active &&{color:", ";}", ":has(:checked) &&{color:", ";}", "[aria-disabled='true'] &&{color:", ";}"], color, StyledTile, hoverColor, StyledTile, activeColor, StyledTile, checkedColor, StyledTile, disabledColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme,
+    isCentered
+  } = _ref2;
+  const iconSize = math(`${theme.iconSizes.md} * 2`);
+  let position;
+  let top;
+  let horizontal;
+  if (!isCentered) {
+    position = 'absolute';
+    top = `${theme.space.base * 6}px`;
+    horizontal = `${theme.space.base * 5}px`;
+  }
+  return css(["position:", ";top:", ";", ":", ";line-height:0;& > *{width:", ";height:", ";}"], position, top, theme.rtl ? 'right' : 'left', horizontal, iconSize, iconSize);
+};
+const StyledTileIcon = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTileIcon",
+  componentId: "sc-1wazhg4-0"
+})(["display:block;transition:color 0.25s ease-in-out;text-align:center;", ";", ";", ";"], sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTileIcon.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTileIcon };

package/dist/esm/styled/tiles/StyledTileInput.js

@@ -0,0 +1,18 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { DEFAULT_THEME } from '@zendeskgarden/react-theming';
+
+const StyledTileInput = styled.input.withConfig({
+  displayName: "StyledTileInput",
+  componentId: "sc-1nq2m6q-0"
+})(["position:absolute;top:0;left:0;opacity:0;z-index:1;margin:0;cursor:", ";width:100%;height:100%;"], props => props.disabled ? 'default' : 'pointer');
+StyledTileInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTileInput };

package/dist/esm/styled/tiles/StyledTileLabel.js

@@ -0,0 +1,34 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getLineHeight } from '@zendeskgarden/react-theming';
+
+const COMPONENT_ID = 'forms.tile_label';
+const sizeStyles = _ref => {
+  let {
+    theme,
+    isCentered
+  } = _ref;
+  const marginTop = isCentered ? `${theme.space.base * 2}px` : 0;
+  const marginHorizontal = isCentered ? undefined : math(`(${theme.iconSizes.md} * 2) + ${theme.space.base * 5}px`);
+  const fontSize = theme.fontSizes.md;
+  const lineHeight = getLineHeight(theme.space.base * 5, fontSize);
+  return css(["margin-top:", ";margin-", ":", ";line-height:", ";font-size:", ";"], marginTop, theme.rtl ? 'right' : 'left', marginHorizontal, lineHeight, fontSize);
+};
+const StyledTileLabel = styled.span.attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledTileLabel",
+  componentId: "sc-1mypv27-0"
+})(["display:block;text-align:", ";font-weight:", ";", ";", ";"], props => props.isCentered && 'center', props => props.theme.fontWeights.semibold, sizeStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledTileLabel.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledTileLabel };

package/dist/esm/styled/toggle/StyledToggleHint.js

@@ -0,0 +1,24 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME } from '@zendeskgarden/react-theming';
+import { StyledHint } from '../common/StyledHint.js';
+
+const COMPONENT_ID = 'forms.toggle_hint';
+const StyledToggleHint = styled(StyledHint).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledToggleHint",
+  componentId: "sc-nziggu-0"
+})(["padding-", ":", ";", ";"], props => props.theme.rtl ? 'right' : 'left', props => math(`${props.theme.space.base} * 12px`), props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledToggleHint.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledToggleHint };

package/dist/esm/styled/toggle/StyledToggleInput.js

@@ -0,0 +1,65 @@
+/**
+* Copyright Zendesk, Inc.
+*
+* Use of this source code is governed under the Apache License, Version 2.0
+* found at http://www.apache.org/licenses/LICENSE-2.0.
+*/
+import styled, { css } from 'styled-components';
+import { math } from 'polished';
+import { retrieveComponentStyles, DEFAULT_THEME, getColor } from '@zendeskgarden/react-theming';
+import { StyledCheckInput } from '../checkbox/StyledCheckInput.js';
+import { StyledToggleLabel } from './StyledToggleLabel.js';
+
+const COMPONENT_ID = 'forms.toggle';
+const colorStyles = _ref => {
+  let {
+    theme
+  } = _ref;
+  const backgroundOptions = {
+    theme,
+    variable: 'background.emphasis'
+  };
+  const backgroundColor = getColor(backgroundOptions);
+  const hoverBackgroundColor = getColor({
+    ...backgroundOptions,
+    dark: {
+      offset: -100
+    },
+    light: {
+      offset: 100
+    }
+  });
+  const activeBackgroundColor = getColor({
+    ...backgroundOptions,
+    dark: {
+      offset: -200
+    },
+    light: {
+      offset: 200
+    }
+  });
+  return css(["& ~ ", "::before{background-color:", ";}&:enabled ~ ", ":hover::before{background-color:", ";}&:enabled ~ ", ":active::before{background-color:", ";}"], StyledToggleLabel, backgroundColor, StyledToggleLabel, hoverBackgroundColor, StyledToggleLabel, activeBackgroundColor);
+};
+const sizeStyles = _ref2 => {
+  let {
+    theme
+  } = _ref2;
+  const height = `${theme.space.base * 5}px`;
+  const width = `${theme.space.base * 10}px`;
+  const iconSize = theme.iconSizes.md;
+  const iconPosition = math(`(${height} - ${iconSize}) / 2`);
+  const checkedIconPosition = math(`${width} - ${iconSize} - ${iconPosition}`);
+  return css(["top:0;width:", ";height:", ";& ~ ", "::before{width:", ";height:", ";}& ~ ", " > svg{top:", ";", ":", ";width:", ";height:", ";}&:checked ~ ", " > svg{", ":", ";}"], width, height, StyledToggleLabel, width, height, StyledToggleLabel, iconPosition, theme.rtl ? 'right' : 'left', iconPosition, iconSize, iconSize, StyledToggleLabel, theme.rtl ? 'right' : 'left', checkedIconPosition);
+};
+const StyledToggleInput = styled(StyledCheckInput).attrs({
+  'data-garden-id': COMPONENT_ID,
+  'data-garden-version': '9.0.0-next.21'
+}).withConfig({
+  displayName: "StyledToggleInput",
+  componentId: "sc-sgp47s-0"
+})(["& ~ ", "::before{top:0;transition:box-shadow .1s ease-in-out,background-color .15s ease-in-out,color .25s ease-in-out;border:none;border-radius:100px;}", ";", ";", ";"], StyledToggleLabel, sizeStyles, colorStyles, props => retrieveComponentStyles(COMPONENT_ID, props));
+StyledToggleInput.defaultProps = {
+  theme: DEFAULT_THEME
+};
+
+export { StyledToggleInput };