@ovotech/element-native 4.4.9 → 5.0.0-canary-bcb1788-338

package/dist/components/DataTable/styles.js

@@ -31,57 +31,57 @@ exports.SeparatorRowText = exports.StyledSeparatorRow = exports.RowHeading = exp
 var element_core_1 = require("@ovotech/element-core");
 var styled_native_1 = __importStar(require("../../styled.native"));
 exports.StyledTableContainer = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic;
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.differentiated);
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    flex-grow: 1;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), (0, element_core_1.numToPx)(theme.border.width.sm), theme.color.surface.borderDim);
 });
 exports.TableHeader = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[1]), (0, element_core_1.numToPx)(core.space[1]), cellWidth === 'auto' ? 1 : 0, cellWidth);
+    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "], ["\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    flex: ", ";\n    align-self: stretch;\n    flex-direction: row;\n    width: ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200]), (0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[200]), cellWidth === 'auto' ? 1 : 0, cellWidth);
 });
 exports.TableHeaderText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.lineHeight.body[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']), semantic.message.base);
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), theme.native.font.family.bold, (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.surface.onSurface);
 });
 exports.TableCaptionText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), core.fontFamily.bodyBold.native, (0, element_core_1.numToPx)(core.fontSize.heading4[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.heading4[smallAndUp ? 'large' : 'small']), semantic.message.branded);
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    color: ", ";\n    text-align: left;\n    flex-wrap: wrap;\n  "])), theme.native.font.family.bold, (0, element_core_1.numToPx)(theme.font.size.xl.mediaQuery[smallAndUp ? 'lg' : 'sm']), (0, element_core_1.numToPx)(theme.font.lineHeight.xl.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.brand.brand);
 });
 exports.CellText = styled_native_1.default.Text(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(core.lineHeight.body.large), (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']));
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "], ["\n    font-family: ", ";\n    line-height: ", ";\n    font-size: ", ";\n  "])), theme.native.font.family.book, (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery.lg), (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']));
 });
 exports.TableCaption = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core;
-    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), (0, element_core_1.numToPx)(core.space[4]), (0, element_core_1.numToPx)(core.space[2]));
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    padding: ", " ", ";\n  "], ["\n    padding: ", " ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[400]), (0, element_core_1.numToPx)(theme.space[200]));
 });
 exports.TableRow = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core, stripe = _a.stripe;
+    var theme = _a.theme, stripe = _a.stripe;
     return (0, styled_native_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "], ["\n    background-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n  "])), stripe
-        ? semantic.surface.cutout
-        : semantic.surface.base, stripe ? '0px' : (0, element_core_1.numToPx)(core.borderWidth.small), stripe
+        ? theme.color.surface.dim
+        : theme.color.surface.surface, stripe ? '0px' : (0, element_core_1.numToPx)(theme.border.width.sm), stripe
         ? 'transparent'
-        : "".concat(semantic.border.differentiated));
+        : "".concat(theme.color.surface.borderDim));
 });
 exports.TableRowHeading = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, semantic = _b.semantic, core = _b.core;
-    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), semantic.surface.base, (0, element_core_1.numToPx)(core.borderWidth.small), semantic.border.functional);
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "], ["\n    background-color: ", ";\n    border-bottom-width: ", ";\n    border-bottom-color: ", ";\n    flex-direction: row;\n    align-items: stretch;\n  "])), theme.color.surface.surface, (0, element_core_1.numToPx)(theme.border.width.sm), theme.color.surface.border);
 });
 exports.TableBody = styled_native_1.default.View(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"], ["\n  flex-direction: column;\n  flex-wrap: nowrap;\n"])));
 exports.TableCell = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
+    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), (0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200]), (0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[200]), cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 exports.RowHeading = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[2]), (0, element_core_1.numToPx)(core.space[2]), cellWidth, cellWidth === 'auto' ? 1 : 0);
+    var theme = _a.theme, cellWidth = _a.cellWidth, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "], ["\n      padding-top: ", ";\n      padding-bottom: ", ";\n      padding-left: ", ";\n      padding-right: ", ";\n      width: ", ";\n      flex: ", ";\n    "])), (0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200]), (0, element_core_1.numToPx)(theme.space[smallAndUp ? 300 : 200]), (0, element_core_1.numToPx)(theme.space[200]), (0, element_core_1.numToPx)(theme.space[200]), cellWidth, cellWidth === 'auto' ? 1 : 0);
 });
 exports.StyledSeparatorRow = styled_native_1.default.View(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, width = _a.width;
-    var minWidth = width ? "".concat(width - core.space[2] * 2, "px") : '100%';
-    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(semantic.surface.elevated, ";\n      padding: ").concat((0, element_core_1.numToPx)(core.space[1]), " ").concat((0, element_core_1.numToPx)(core.space[2]), ";\n    ");
+    var theme = _a.theme, width = _a.width;
+    var minWidth = width ? "".concat(width - theme.space[200] * 2, "px") : '100%';
+    return "\n      min-width: ".concat(minWidth, ";\n      flex: 1;\n      flex-direction: row;\n      background-color: ").concat(theme.color.surface.bright, ";\n      padding: ").concat((0, element_core_1.numToPx)(theme.space[100]), " ").concat((0, element_core_1.numToPx)(theme.space[200]), ";\n    ");
 });
 exports.SeparatorRowText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return "\n  flex: 1;\n  font-family: ".concat(core.fontFamily.body.native, ";\n  font-size: ").concat((0, element_core_1.numToPx)(core.fontSize.small[smallAndUp ? 'large' : 'small']), ";\n  line-height: ").concat((0, element_core_1.numToPx)(core.lineHeight.small[smallAndUp ? 'large' : 'small']), ";\n  color: ").concat(semantic.message.secondary, ";\n");
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return "\n  flex: 1;\n  font-family: ".concat(theme.native.font.family.book, ";\n  font-size: ").concat((0, element_core_1.numToPx)(theme.font.size.sm.mediaQuery[smallAndUp ? 'lg' : 'sm']), ";\n  line-height: ").concat((0, element_core_1.numToPx)(theme.font.lineHeight.sm.mediaQuery[smallAndUp ? 'lg' : 'sm']), ";\n  color: ").concat(theme.color.surface.onSurfaceVariant, ";\n");
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11;

package/dist/components/DateField/DateField.d.ts

@@ -7,14 +7,15 @@ export type DateFormat = {
 };
 type Props = {
     label: string;
-    hint?: ReactNode;
-    error?: ReactNode;
-    optional?: boolean;
     onChange: (date: DateFormat) => void;
     value: DateFormat;
+    autoFocusNext?: boolean;
+    editable?: boolean;
+    hint?: ReactNode;
+    error?: ReactNode;
     fullWidth?: boolean;
+    optional?: boolean;
     testID?: string;
-    editable?: boolean;
 };
 export declare const DateField: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<TextInput>>;
 export {};

package/dist/components/DateField/DateField.js

@@ -53,29 +53,39 @@ var NumberInput_1 = require("../NumberInput");
 var Stack_1 = require("../Stack");
 var SubLabelText_1 = require("../SubLabelText");
 var InlineFields = styled_native_1.default.View(function (_a) {
-    var stretch = _a.stretch, core = _a.theme.core;
-    var margin = (0, element_core_1.numToPx)(core.space[1]);
-    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      margin-left: -", ";\n      margin-right: -", ";\n      flex-direction: row;\n      ", "\n    "], ["\n      margin-left: -", ";\n      margin-right: -", ";\n      flex-direction: row;\n      ", "\n    "])), margin, margin, stretch ? '' : "width: 265px;");
+    var stretch = _a.stretch, theme = _a.theme;
+    var margin = (0, element_core_1.numToPx)(theme.space[100]);
+    return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    margin-left: -", ";\n    margin-right: -", ";\n    flex-direction: row;\n    ", "\n  "], ["\n    margin-left: -", ";\n    margin-right: -", ";\n    flex-direction: row;\n    ", "\n  "])), margin, margin, stretch ? '' : "width: 265px;");
 });
 var SubField = (0, styled_native_1.default)(Stack_1.Stack)(function (_a) {
-    var core = _a.theme.core;
-    var padding = (0, element_core_1.numToPx)(core.space[1]);
+    var theme = _a.theme;
+    var padding = (0, element_core_1.numToPx)(theme.space[100]);
     return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    padding-right: ", ";\n    padding-left: ", ";\n  "], ["\n    padding-right: ", ";\n    padding-left: ", ";\n  "])), padding, padding);
 });
 var DayField = (0, styled_native_1.default)(SubField)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
 var MonthField = (0, styled_native_1.default)(SubField)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  width: 25%;\n"], ["\n  width: 25%;\n"])));
 var YearField = (0, styled_native_1.default)(SubField)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  width: 50%;\n"], ["\n  width: 50%;\n"])));
 exports.DateField = (0, react_1.forwardRef)(function (_a, ref) {
-    var label = _a.label, hint = _a.hint, error = _a.error, _b = _a.optional, optional = _b === void 0 ? false : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, testID = _a.testID, _d = _a.editable, editable = _d === void 0 ? false : _d;
+    var label = _a.label, hint = _a.hint, error = _a.error, _b = _a.optional, optional = _b === void 0 ? false : _b, _c = _a.fullWidth, fullWidth = _c === void 0 ? false : _c, onChange = _a.onChange, value = _a.value, testID = _a.testID, _d = _a.editable, editable = _d === void 0 ? true : _d, _e = _a.autoFocusNext, autoFocusNext = _e === void 0 ? true : _e;
     var hasError = !!error;
+    var dayRef = (0, react_1.createRef)();
+    var monthRef = (0, react_1.createRef)();
+    var yearRef = (0, react_1.createRef)();
+    var nextFieldRef = {
+        day: monthRef,
+        month: yearRef,
+    };
     var handleChange = function (key) { return function (datePartValue) {
         var _a;
         onChange &&
             onChange(__assign(__assign({}, value), (_a = {}, _a[key] = datePartValue, _a)));
+        if (key !== 'year' && autoFocusNext) {
+            var nextField = nextFieldRef[key].current;
+            if (nextField && datePartValue.length === 2) {
+                nextField.focus();
+            }
+        }
     }; };
-    var dayRef = (0, react_1.createRef)();
-    var monthRef = (0, react_1.createRef)();
-    var yearRef = (0, react_1.createRef)();
     var accessibilityLabel = function (labelText) {
         return [labelText, (0, utils_1.getText)(hint), (0, utils_1.getText)(error)].filter(Boolean).join(', ');
     };
@@ -84,6 +94,6 @@ exports.DateField = (0, react_1.forwardRef)(function (_a, ref) {
             internalRef.current.focus();
         }
     }; };
-    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsxs)(InlineFields, { stretch: fullWidth, children: [(0, jsx_runtime_1.jsxs)(DayField, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Day" }) }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: (0, utils_1.mergeRefs)(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable })] }), (0, jsx_runtime_1.jsxs)(MonthField, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Month" }) }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: "".concat(testID, "-month"), stretch: true, editable: editable })] }), (0, jsx_runtime_1.jsxs)(YearField, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Year" }) }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable })] })] })] }) }));
+    return ((0, jsx_runtime_1.jsx)(FormGroup_1.FormGroup, { error: hasError, children: (0, jsx_runtime_1.jsxs)(Stack_1.Stack, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsxs)(LabelText_1.LabelText, { children: [label, optional ? ' (optional)' : null] }), hint ? (0, jsx_runtime_1.jsx)(HintText_1.HintText, { children: hint }) : null, error ? (0, jsx_runtime_1.jsx)(ErrorText_1.ErrorText, { children: error }) : null] }), (0, jsx_runtime_1.jsxs)(InlineFields, { stretch: fullWidth, children: [(0, jsx_runtime_1.jsxs)(DayField, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(dayRef), accessible: false, children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Day" }) }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: (0, utils_1.mergeRefs)(dayRef, ref), accessibilityLabel: accessibilityLabel('Day'), invalid: hasError, value: value.day, onChangeText: handleChange('day'), testID: testID, stretch: true, editable: editable, maxLength: 2 })] }), (0, jsx_runtime_1.jsxs)(MonthField, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(monthRef), accessible: false, children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Month" }) }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: monthRef, accessibilityLabel: accessibilityLabel('Month'), invalid: hasError, value: value.month, onChangeText: handleChange('month'), testID: "".concat(testID, "-month"), stretch: true, editable: editable, maxLength: 2 })] }), (0, jsx_runtime_1.jsxs)(YearField, { spaceBetween: 1, children: [(0, jsx_runtime_1.jsx)(react_native_1.TouchableWithoutFeedback, { onPress: focusRef(yearRef), accessible: false, children: (0, jsx_runtime_1.jsx)(SubLabelText_1.SubLabelText, { children: "Year" }) }), (0, jsx_runtime_1.jsx)(NumberInput_1.NumberInput, { ref: yearRef, accessibilityLabel: accessibilityLabel('Year'), invalid: hasError, value: value.year, onChangeText: handleChange('year'), testID: "".concat(testID, "-year"), stretch: true, editable: editable, maxLength: 4 })] })] })] }) }));
 });
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5;

package/dist/components/Disclosure/Disclosure.js

@@ -58,16 +58,16 @@ var styled_native_1 = __importStar(require("../../styled.native"));
 var Icon_1 = require("../Icon");
 var DisclosureButton = styled_native_1.default.TouchableOpacity(function () { return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "], ["\n    display: flex;\n    flex-direction: row;\n    align-items: center;\n  "]))); });
 var DisclosureButtonIcon = (0, styled_native_1.default)(Icon_1.Icon)(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', (0, element_core_1.numToPx)(core.space[smallAndUp ? 2 : 1]), semantic.message.link);
+    var theme = _a.theme, expanded = _a.expanded, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "], ["\n    transform: ", ";\n    margin-right: ", ";\n    color: ", ";\n  "])), expanded ? 'rotate(0deg)' : 'rotate(-90deg)', (0, element_core_1.numToPx)(theme.space[smallAndUp ? 200 : 100]), theme.color.surface.link);
 });
 var DisclosureButtonText = styled_native_1.default.Text(function (_a) {
-    var _b = _a.theme, core = _b.core, semantic = _b.semantic, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n  "])), core.fontFamily.body.native, (0, element_core_1.numToPx)(core.fontSize.body[smallAndUp ? 'large' : 'small']), (0, element_core_1.numToPx)(core.lineHeight.body[smallAndUp ? 'large' : 'small']), semantic.message.link, semantic.message.link);
+    var theme = _a.theme, smallAndUp = _a.smallAndUp;
+    return (0, styled_native_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n    padding-left: ", ";\n  "], ["\n    font-family: ", ";\n    font-size: ", ";\n    line-height: ", ";\n    text-decoration: underline;\n    text-decoration-color: ", ";\n    color: ", ";\n    padding-left: ", ";\n  "])), theme.native.font.family.book, (0, element_core_1.numToPx)(theme.font.size.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), (0, element_core_1.numToPx)(theme.font.lineHeight.md.mediaQuery[smallAndUp ? 'lg' : 'sm']), theme.color.surface.link, theme.color.surface.link, (0, element_core_1.numToPx)(theme.space[200]));
 });
 var DisclosurePanel = styled_native_1.default.View(function (_a) {
-    var core = _a.theme.core, smallAndUp = _a.smallAndUp;
-    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(core.space[smallAndUp ? 3 : 2]), (0, element_core_1.numToPx)(core.space[smallAndUp ? 2 : 1]));
+    var theme = _a.theme;
+    return (0, styled_native_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    margin-top: ", ";\n    padding-left: ", ";\n  "], ["\n    margin-top: ", ";\n    padding-left: ", ";\n  "])), (0, element_core_1.numToPx)(theme.space[300]), (0, element_core_1.numToPx)(theme.space[600]));
 });
 exports.Disclosure = (0, react_1.forwardRef)(function (_a, ref) {
     var children = _a.children, title = _a.title, _b = _a.expanded, expanded = _b === void 0 ? false : _b, onToggle = _a.onToggle, rest = __rest(_a, ["children", "title", "expanded", "onToggle"]);

package/dist/components/Divider/Divider.js

@@ -31,10 +31,10 @@ exports.Divider = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var styled_native_1 = __importStar(require("../../styled.native"));
 var StyledDivider = styled_native_1.default.View(function (_a) {
-    var semantic = _a.theme.semantic, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
+    var theme = _a.theme, _b = _a.type, type = _b === void 0 ? 'default' : _b, _c = _a.width, width = _c === void 0 ? '100%' : _c;
     return (0, styled_native_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "], ["\n      height: 1px;\n      background: ", ";\n      width: ", ";\n    "])), type === 'default'
-        ? semantic.border.graphic
-        : semantic.border.differentiated, width);
+        ? theme.color.surface.border
+        : theme.color.surface.borderDim, width);
 });
 var Divider = function (_a) {
     var type = _a.type, width = _a.width;