@telus-uds/components-base 3.29.0 → 4.0.0-alpha.0

package/lib/cjs/Carousel/CarouselTabs/CarouselTabsPanelItem.js

@@ -3,18 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselTabsPanelItem = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
-var _ThemeProvider = require("../../ThemeProvider");
-var _utils = require("../../utils");
+var _styles = require("../../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../../ThemeProvider/useThemeTokens");
+var _selectSystemProps = require("../../utils/props/selectSystemProps");
+var _a11yProps = require("../../utils/props/a11yProps");
+var _pressProps = require("../../utils/props/pressProps");
+var _viewProps = require("../../utils/props/viewProps");
+var _textProps = require("../../utils/props/textProps");
+var _tokens = require("../../utils/props/tokens");
+var _variantProp = require("../../utils/props/variantProp");
+var _pressability = require("../../utils/pressability");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectPressProps, pressPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.pressProps, _utils.viewProps]);
-const [selectTextProps, textPropTypes] = (0, _utils.selectSystemProps)([_utils.textProps]);
+const [selectPressProps, pressPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _pressProps.pressProps, _viewProps.viewProps]);
+const [selectTextProps, textPropTypes] = (0, _selectSystemProps.selectSystemProps)([_textProps.textProps]);
 const selectContainerStyles = _ref => {
   let {
     paddingLeft,
@@ -57,7 +65,7 @@ const selectTextStyles = _ref2 => {
     fontName,
     color
   } = _ref2;
-  return (0, _ThemeProvider.applyTextStyles)({
+  return (0, _styles.applyTextStyles)({
     fontSize,
     fontScaleCap,
     lineHeight,
@@ -67,7 +75,7 @@ const selectTextStyles = _ref2 => {
     color
   });
 };
-const CarouselTabsPanelItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const CarouselTabsPanelItem = exports.CarouselTabsPanelItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     title,
     selected,
@@ -82,8 +90,8 @@ const CarouselTabsPanelItem = /*#__PURE__*/_react.default.forwardRef((_ref3, ref
   // (must refocus _after_ calling `goTo`, else focus target content is not up to date)
   const [isFocused, setIsFocused] = _react.default.useState(false);
   const disabled = (inactive || selected) && !isFocused;
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
-  const resolveTokens = pressState => getTokens((0, _utils.resolvePressableState)(pressState, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('CarouselTabsPanelItem', tokens, variant);
+  const resolveTokens = pressState => getTokens((0, _pressability.resolvePressableState)(pressState, {
     selected
   }));
   const getContainerStyle = pressState => selectContainerStyles(resolveTokens(pressState));
@@ -119,7 +127,6 @@ CarouselTabsPanelItem.propTypes = {
   ...textPropTypes,
   title: _propTypes.default.string.isRequired,
   selected: _propTypes.default.bool,
-  tokens: (0, _utils.getTokensPropType)('CarouselTabsPanelItem'),
-  variant: _utils.variantProp.propType
-};
-var _default = exports.default = CarouselTabsPanelItem;
+  tokens: (0, _tokens.getTokensPropType)('CarouselTabsPanelItem'),
+  variant: _variantProp.variantProp.propType
+};

package/lib/cjs/Carousel/CarouselThumbnail.js

@@ -3,14 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselThumbnail = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Pressable"));
 var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
 var _CarouselContext = require("./CarouselContext");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const selectPressableTokens = _ref => {
@@ -34,7 +34,7 @@ const selectPressableTokens = _ref => {
  * `Carousel.Thumbnail` is used to wrap the content of an individual slide and is suppsoed to be the
  * only top-level component passed to the `Carousel`
  */
-const CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
+const CarouselThumbnail = exports.CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) => {
   let {
     accessibilityLabel,
     alt,
@@ -48,8 +48,8 @@ const CarouselThumbnail = /*#__PURE__*/_react.default.forwardRef((_ref2, ref) =>
     getCopyWithPlaceholders,
     goTo
   } = (0, _CarouselContext.useCarousel)();
-  const getThumbnailTokens = (0, _ThemeProvider.useThemeTokensCallback)('CarouselThumbnail');
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const getThumbnailTokens = (0, _useThemeTokens.useThemeTokensCallback)('CarouselThumbnail');
+  const viewport = (0, _useViewport.useViewport)();
   const thumbnailTitle = alt ?? getCopyWithPlaceholders('stepTrackerLabel').replace(/%\{itemLabel\}/g, itemLabel).replace(/%\{stepNumber\}/g, index).replace(/%\{stepCount\}/g, totalItems);
   const handlePress = () => goTo(index);
   const handleKeyDown = event => {
@@ -116,5 +116,4 @@ CarouselThumbnail.propTypes = {
   alt: _propTypes.default.string,
   index: _propTypes.default.number,
   src: _propTypes.default.string
-};
-var _default = exports.default = CarouselThumbnail;
+};

package/lib/cjs/Carousel/CarouselThumbnailNavigation.js

@@ -3,25 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CarouselThumbnailNavigation = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
 var _CarouselContext = require("./CarouselContext");
-var _CarouselThumbnail = _interopRequireDefault(require("./CarouselThumbnail"));
-var _StackView = require("../StackView");
-var _ThemeProvider = require("../ThemeProvider");
-var _ViewportProvider = require("../ViewportProvider");
+var _CarouselThumbnail = require("./CarouselThumbnail");
+var _StackWrap = require("../StackView/StackWrap");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _useViewport = require("../ViewportProvider/useViewport");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CarouselThumbnailNavigation = exports.CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     thumbnails = []
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     alignItems
-  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail', {}, {
+  } = (0, _useThemeTokens.useThemeTokens)('CarouselThumbnail', {}, {
     viewport
   });
   const {
@@ -32,7 +32,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref
   }
   const {
     containerPaddingTop: thumbnailContainerPaddingTop
-  } = (0, _ThemeProvider.useThemeTokens)('CarouselThumbnail');
+  } = (0, _useThemeTokens.useThemeTokens)('CarouselThumbnail');
   const stackWrapTokens = {
     justifyContent: 'flex-start'
   };
@@ -43,7 +43,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref
   };
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: containerStyles,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackWrap.StackWrap, {
       direction: "row",
       tokens: stackWrapTokens,
       space: 2,
@@ -54,7 +54,7 @@ const CarouselThumbnailNavigation = /*#__PURE__*/_react.default.forwardRef((_ref
           alt,
           src
         } = _ref2;
-        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.default, {
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(_CarouselThumbnail.CarouselThumbnail, {
           accessibilityLabel: accessibilityLabel,
           alt: alt,
           index: index,
@@ -74,5 +74,4 @@ CarouselThumbnailNavigation.propTypes = {
     alt: _propTypes.default.string,
     src: _propTypes.default.string
   })).isRequired
-};
-var _default = exports.default = CarouselThumbnailNavigation;
+};

package/lib/cjs/Carousel/dictionary.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.dictionary = void 0;
 // 'stepLabel' and 'stepTrackerLabel' are passed down to StepTracker
-var _default = exports.default = {
+const dictionary = exports.dictionary = {
   en: {
     carouselLabel: '%{stepCount} items',
     iconButtonLabel: 'Show %{itemLabel} %{targetStep} of %{stepCount}',

package/lib/cjs/Checkbox/Checkbox.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.Checkbox = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
@@ -11,16 +11,24 @@ var _Pressable = _interopRequireDefault(require("react-native-web/dist/cjs/expor
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
-var _LabelContent = _interopRequireDefault(require("../InputLabel/LabelContent"));
-var _Feedback = _interopRequireDefault(require("../Feedback"));
-var _StackView = _interopRequireDefault(require("../StackView"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _useUniqueId = _interopRequireDefault(require("../utils/useUniqueId"));
+var _CheckboxInput = require("./CheckboxInput");
+var _LabelContent = require("../InputLabel/LabelContent");
+var _Feedback = require("../Feedback/Feedback");
+var _StackView = require("../StackView/StackView");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useTheme = require("../ThemeProvider/useTheme");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _useUniqueId = require("../utils/useUniqueId");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
 const selectInputStyles = (_ref, isChecked) => {
   let {
     iconBackgroundColor,
@@ -42,7 +50,7 @@ const selectInputStyles = (_ref, isChecked) => {
     backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
     height: inputHeight,
     width: inputWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(inputShadow),
+    ...(0, _styles.applyShadowToken)(inputShadow),
     ..._Platform.default.select({
       web: {
         outlineStyle: 'solid',
@@ -67,7 +75,7 @@ const selectDescriptionStyles = _ref2 => {
   } = _ref2;
   return {
     marginLeft: descriptionMarginLeft ?? containerPaddingLeft + inputWidth + labelMarginLeft,
-    ...(0, _ThemeProvider.applyTextStyles)({
+    ...(0, _styles.applyTextStyles)({
       color: descriptionFontColor,
       fontSize: descriptionFontSize,
       lineHeight: descriptionLineHeight,
@@ -87,7 +95,7 @@ const selectLabelStyles = (_ref3, themeOptions) => {
   } = _ref3;
   return {
     marginLeft: labelMarginLeft,
-    ...(0, _ThemeProvider.applyTextStyles)({
+    ...(0, _styles.applyTextStyles)({
       color: labelColor,
       fontName: labelFontName,
       fontWeight: labelFontWeight,
@@ -183,7 +191,7 @@ const selectContainerStyles = _ref7 => {
  * or the internal state in case of uncontrolled checkbox.
  *
  */
-const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
+const Checkbox = exports.Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   let {
     checked,
     defaultChecked,
@@ -205,12 +213,12 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     currentValue: isChecked,
     setValue: setIsChecked,
     isControlled
-  } = (0, _utils.useInputValue)({
+  } = (0, _input.useInputValue)({
     value: checked,
     initialValue: defaultChecked,
     onChange
   }, 'useCheckboxValue');
-  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Checkbox', tokens, {
+  const getTokens = (0, _useThemeTokens.useThemeTokensCallback)('Checkbox', tokens, {
     checked: isChecked,
     inactive,
     error,
@@ -237,11 +245,11 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
     // The expected keyboard shortcut for activating a checkbox is the Space key
     if (event?.key === ' ') handleChange(event);
   };
-  const uniqueId = (0, _useUniqueId.default)('checkbox');
+  const uniqueId = (0, _useUniqueId.useUniqueId)('checkbox');
   const inputId = id ?? uniqueId;
   const {
     themeOptions
-  } = (0, _ThemeProvider.useTheme)();
+  } = (0, _useTheme.useTheme)();
   const selectedProps = selectProps({
     accessibilityRole: 'checkbox',
     accessibilityState: {
@@ -253,7 +261,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
     style: staticStyles.wrapper,
     ref: ref,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
       direction: feedbackPosition === 'top' ? 'column-reverse' : 'column',
       space: 0,
       children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
@@ -279,7 +287,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
           });
           const iconTokens = selectIconTokens(stateTokens);
           const labelStyles = selectLabelStyles(stateTokens, themeOptions);
-          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.default, {
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackView, {
             space: 0,
             children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
               style: staticStyles.container,
@@ -288,7 +296,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
                 children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
                   style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
                   testID: "Checkbox-Input",
-                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.CheckboxInput, {
                     checked: isChecked,
                     defaultChecked: defaultChecked,
                     disabled: inactive,
@@ -305,7 +313,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
                 })
               }), Boolean(label) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
                 style: labelStyles,
-                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.default, {
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_LabelContent.LabelContent, {
                   forId: inputId,
                   children: label
                 })
@@ -318,7 +326,7 @@ const Checkbox = /*#__PURE__*/_react.default.forwardRef((_ref8, ref) => {
         }
       }), Boolean(feedback) && /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
         style: styles.feedbackContainer,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.Feedback, {
           title: feedback,
           variant: {
             icon: error === true
@@ -375,11 +383,11 @@ Checkbox.propTypes = {
   /**
    * Checkbox tokens.
    */
-  tokens: (0, _utils.getTokensPropType)('Checkbox'),
+  tokens: (0, _tokens.getTokensPropType)('Checkbox'),
   /**
    * Checkbox variant.
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * An optional Checkbox description.
    */
@@ -389,7 +397,6 @@ Checkbox.propTypes = {
    */
   testID: _propTypes.default.string
 };
-var _default = exports.default = Checkbox;
 const staticStyles = _StyleSheet.default.create({
   wrapper: {
     backgroundColor: 'transparent'

package/lib/cjs/Checkbox/CheckboxButton.js

@@ -3,18 +3,22 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.selectCheckboxTokens = exports.default = void 0;
+exports.selectCheckboxTokens = exports.CheckboxButton = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
 var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
 var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
-var _CheckboxInput = _interopRequireDefault(require("./CheckboxInput"));
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
+var _CheckboxInput = require("./CheckboxInput");
+var _styles = require("../ThemeProvider/utils/styles");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _viewProps = require("../utils/props/viewProps");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
 const selectInputStyles = (_ref, isChecked) => {
   let {
     iconBackgroundColor,
@@ -36,7 +40,7 @@ const selectInputStyles = (_ref, isChecked) => {
     backgroundColor: isChecked ? iconBackgroundColor : inputBackgroundColor,
     height: inputHeight,
     width: inputWidth,
-    ...(0, _ThemeProvider.applyShadowToken)(inputShadow),
+    ...(0, _styles.applyShadowToken)(inputShadow),
     ..._Platform.default.select({
       web: {
         outlineStyle: 'solid',
@@ -60,14 +64,14 @@ const selectIconTokens = _ref2 => {
   };
 };
 const tokenKeys = ['checkedBackgroundColor', 'checkedSize', 'inputBackgroundColor', 'inputBorderColor', 'inputBorderWidth', 'inputOutlineColor', 'inputOutlineWidth', 'inputSize', 'outerBorderColor', 'outerBorderWidth', 'outerBorderGap', 'inputSize'];
-const selectCheckboxTokens = (themeTokens, prefix) => (0, _utils.selectTokens)(tokenKeys, themeTokens, prefix);
+const selectCheckboxTokens = (themeTokens, prefix) => (0, _tokens.selectTokens)(tokenKeys, themeTokens, prefix);
 
 /**
  * The visual toggle of a checkbox input. Is not interactive on its own, should be used inside
  * an interactive parent that passes down props when interacted with. Used in CheckboxCard
  */
 exports.selectCheckboxTokens = selectCheckboxTokens;
-const CheckboxButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
+const CheckboxButton = exports.CheckboxButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   let {
     isChecked,
     tokens,
@@ -84,7 +88,7 @@ const CheckboxButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
   const {
     icon: IconComponent,
     ...stateTokens
-  } = (0, _ThemeProvider.useThemeTokens)('Checkbox', tokens, {
+  } = (0, _useThemeTokens.useThemeTokens)('Checkbox', tokens, {
     checked: isChecked
   });
   const iconTokens = selectIconTokens(stateTokens);
@@ -93,7 +97,7 @@ const CheckboxButton = /*#__PURE__*/_react.default.forwardRef((_ref3, ref) => {
     children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_View.default, {
       style: [staticStyles.defaultInputStyles, selectInputStyles(stateTokens, isChecked)],
       testID: inputId,
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.default, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_CheckboxInput.CheckboxInput, {
         ref: ref,
         checked: isChecked,
         defaultChecked: defaultChecked,
@@ -122,7 +126,7 @@ CheckboxButton.propTypes = {
   /**
    * Checkbox tokens.
    */
-  tokens: (0, _utils.getTokensSetPropType)(tokenKeys, {
+  tokens: (0, _tokens.getTokensSetPropType)(tokenKeys, {
     allowFunction: true
   }),
   /**
@@ -158,7 +162,6 @@ CheckboxButton.propTypes = {
    */
   value: _propTypes.default.bool
 };
-var _default = exports.default = CheckboxButton;
 const staticStyles = _StyleSheet.default.create({
   container: {
     flexDirection: 'row',

package/lib/cjs/Checkbox/CheckboxGroup.js

@@ -3,20 +3,26 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CheckboxGroup = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
-var _airbnbPropTypes = _interopRequireDefault(require("airbnb-prop-types"));
-var _ViewportProvider = require("../ViewportProvider");
-var _ThemeProvider = require("../ThemeProvider");
-var _utils = require("../utils");
-var _StackView = require("../StackView");
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-var _Fieldset = _interopRequireDefault(require("../Fieldset"));
+var _useViewport = require("../ViewportProvider/useViewport");
+var _useThemeTokens = require("../ThemeProvider/useThemeTokens");
+var _a11yProps = require("../utils/props/a11yProps");
+var _containUniqueFields = require("../utils/containUniqueFields");
+var _handlerProps = require("../utils/props/handlerProps");
+var _tokens = require("../utils/props/tokens");
+var _selectSystemProps = require("../utils/props/selectSystemProps");
+var _input = require("../utils/input");
+var _variantProp = require("../utils/props/variantProp");
+var _viewProps = require("../utils/props/viewProps");
+var _getStackedContent = require("../StackView/getStackedContent");
+var _Checkbox = require("./Checkbox");
+var _Fieldset = require("../Fieldset/Fieldset");
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
-const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
-const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.focusHandlerProps, _utils.viewProps]);
+const [selectProps, selectedSystemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _viewProps.viewProps]);
+const [selectItemProps, selectedItemPropTypes] = (0, _selectSystemProps.selectSystemProps)([_a11yProps.a11yProps, _handlerProps.focusHandlerProps, _viewProps.viewProps]);
 
 /**
  * A group of Checkboxs that behave as a fieldset. Use when users select any number of choices from options.
@@ -65,7 +71,7 @@ const [selectItemProps, selectedItemPropTypes] = (0, _utils.selectSystemProps)([
  * />
  * ```
  */
-const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+const CheckboxGroup = exports.CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     tokens,
     radioTokens,
@@ -85,7 +91,7 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     inactive,
     ...rest
   } = _ref;
-  const viewport = (0, _ViewportProvider.useViewport)();
+  const viewport = (0, _useViewport.useViewport)();
   const {
     space,
     fieldSpace,
@@ -96,7 +102,7 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     borderBottomLeftRadius,
     borderBottomRightRadius,
     outlineOffset
-  } = (0, _ThemeProvider.useThemeTokens)('CheckboxGroup', tokens, variant, {
+  } = (0, _useThemeTokens.useThemeTokens)('CheckboxGroup', tokens, variant, {
     viewport
   });
   const borderTokens = {
@@ -110,14 +116,14 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   const {
     currentValues,
     toggleOneValue
-  } = (0, _utils.useMultipleInputValues)({
+  } = (0, _input.useMultipleInputValues)({
     values: checkedIds,
     initialValues: initialCheckedIds,
     onChange,
     readOnly: readOnly || inactive
   });
   const uniqueFields = ['id', 'label'];
-  if (!(0, _utils.containUniqueFields)(items, uniqueFields)) {
+  if (!(0, _containUniqueFields.containUniqueFields)(items, uniqueFields)) {
     throw new Error(`CheckboxGroup items must have unique ${uniqueFields.join(', ')}`);
   }
   const checkboxes = items.map((_ref2, index) => {
@@ -135,7 +141,7 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       if (typeof itemOnChange === 'function') itemOnChange(newCheckedState, event);
       toggleOneValue(checkboxId, event);
     };
-    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.default, {
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Checkbox.Checkbox, {
       ref: itemRef,
       id: checkboxId,
       checked: currentValues.includes(checkboxId),
@@ -149,7 +155,7 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
       ...selectItemProps(itemRest)
     }, checkboxId);
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.default, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Fieldset.Fieldset, {
     ref: ref,
     name: inputGroupName,
     legend: legend,
@@ -164,7 +170,7 @@ const CheckboxGroup = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
     tokens: borderTokens,
     showIcon: showIcon,
     ...selectProps(rest),
-    children: (0, _StackView.getStackedContent)(checkboxes, {
+    children: (0, _getStackedContent.getStackedContent)(checkboxes, {
       space,
       direction: 'column'
     })
@@ -176,15 +182,15 @@ CheckboxGroup.propTypes = {
   /**
    * Optional theme token overrides for the outer CheckboxGroup component
    */
-  tokens: (0, _utils.getTokensPropType)('CheckboxGroup'),
+  tokens: (0, _tokens.getTokensPropType)('CheckboxGroup'),
   /**
    * Optional theme token overrides for each inner Checkbox component
    */
-  radioTokens: (0, _utils.getTokensPropType)('Checkbox'),
+  radioTokens: (0, _tokens.getTokensPropType)('Checkbox'),
   /**
    * Theme variants, shared between both CheckboxGroup and Checkbox
    */
-  variant: _utils.variantProp.propType,
+  variant: _variantProp.variantProp.propType,
   /**
    * Array of objects containing specifics for each Checkbox to be rendered in the group.
    */
@@ -193,7 +199,9 @@ CheckboxGroup.propTypes = {
     label: _propTypes.default.string,
     id: _propTypes.default.string,
     onChange: _propTypes.default.func,
-    ref: _airbnbPropTypes.default.ref(),
+    ref: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.shape({
+      current: _propTypes.default.any
+    })]),
     inactive: _propTypes.default.bool,
     description: _propTypes.default.string
   })),
@@ -248,5 +256,4 @@ CheckboxGroup.propTypes = {
    * On Web, this is passed to the `name` attribute of the fieldset and each checkbox input.
    */
   name: _propTypes.default.string
-};
-var _default = exports.default = CheckboxGroup;
+};

package/lib/cjs/Checkbox/CheckboxInput.js

@@ -3,14 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CheckboxInput = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 /**
  * On Web we need to include an actual input but hide it.
- */const CheckboxInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
+ */
+const CheckboxInput = exports.CheckboxInput = /*#__PURE__*/_react.default.forwardRef((_ref, ref) => {
   let {
     checked,
     defaultChecked,
@@ -51,5 +52,4 @@ CheckboxInput.propTypes = {
   name: _propTypes.default.string,
   onChange: _propTypes.default.func,
   value: _propTypes.default.string
-};
-var _default = exports.default = CheckboxInput;
+};

package/lib/cjs/Checkbox/CheckboxInput.native.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = void 0;
+exports.CheckboxInput = void 0;
 /**
  * There's no checkbox input on native platforms, so this is a noop.
  */
 const CheckboxInput = () => null;
-var _default = exports.default = CheckboxInput;
+exports.CheckboxInput = CheckboxInput;