@helpdice/ui 1.0.1 → 1.0.2

package/esm/fieldset/fieldset-content.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type FieldsetContentProps = Props & NativeAttrs;
+declare const FieldsetContent: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default FieldsetContent;

package/esm/fieldset/fieldset-content.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var FieldsetContentComponent = function FieldsetContentComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var classes = useClasses('content', className);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["2403982542", [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2403982542",
+    dynamic: [SCALES.width(1, '100%'), SCALES.height(1, 'auto'), SCALES.pt(1.3), SCALES.pr(1.3), SCALES.pb(1.3), SCALES.pl(1.3), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".content.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, '100%'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(1.3), " ").concat(SCALES.pr(1.3), " ").concat(SCALES.pb(1.3), " ").concat(SCALES.pl(1.3), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}.content.__jsx-style-dynamic-selector > *:first-child{margin-top:0;}.content.__jsx-style-dynamic-selector > *:last-child{margin-bottom:0;}")));
+};
+FieldsetContentComponent.displayName = 'FieldsetContent';
+var FieldsetContent = withScale(FieldsetContentComponent);
+export default FieldsetContent;

package/esm/fieldset/fieldset-context.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export interface FieldItem {
+    value: string;
+    label: string;
+}
+export interface FieldsetConfig {
+    register?: (item: FieldItem) => void;
+    currentValue: string;
+    inGroup: boolean;
+}
+export declare const FieldsetContext: React.Context<FieldsetConfig>;
+export declare const useFieldset: () => FieldsetConfig;

package/esm/fieldset/fieldset-context.js

@@ -0,0 +1,9 @@
+import React from 'react';
+var defaultContext = {
+  inGroup: false,
+  currentValue: ''
+};
+export var FieldsetContext = /*#__PURE__*/React.createContext(defaultContext);
+export var useFieldset = function useFieldset() {
+  return React.useContext(FieldsetContext);
+};

package/esm/fieldset/fieldset-footer.d.ts

@@ -0,0 +1,42 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type FieldsetFooterProps = Props & NativeAttrs;
+declare const FieldsetFooter: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default FieldsetFooter;

package/esm/fieldset/fieldset-footer.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useTheme from '../use-theme';
+import useScale, { withScale } from '../use-scale';
+var FieldsetFooterComponent = function FieldsetFooterComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  return /*#__PURE__*/React.createElement("footer", _extends({}, props, {
+    className: _JSXStyle.dynamic([["903731644", [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || className || "")
+  }), children, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "903731644",
+    dynamic: [theme.palette.accents_1, theme.palette.border, theme.layout.radius, theme.layout.radius, theme.palette.accents_6, theme.layout.gapHalf, theme.layout.gap, SCALES.font(0.875), SCALES.width(1, 'auto'), SCALES.height(2.875), SCALES.pt(0.625), SCALES.pr(1.31), SCALES.pb(0.625), SCALES.pl(1.31), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, "footer.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.accents_1, ";border-top:1px solid ").concat(theme.palette.border, ";border-bottom-left-radius:").concat(theme.layout.radius, ";border-bottom-right-radius:").concat(theme.layout.radius, ";display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;overflow:hidden;color:").concat(theme.palette.accents_6, ";padding:").concat(theme.layout.gapHalf, " ").concat(theme.layout.gap, ";box-sizing:border-box;font-size:").concat(SCALES.font(0.875), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(2.875), ";padding:").concat(SCALES.pt(0.625), " ").concat(SCALES.pr(1.31), " ").concat(SCALES.pb(0.625), " ").concat(SCALES.pl(1.31), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+};
+FieldsetFooterComponent.displayName = 'FieldsetFooter';
+var FieldsetFooter = withScale(FieldsetFooterComponent);
+export default FieldsetFooter;

package/esm/fieldset/fieldset-group.d.ts

@@ -0,0 +1,44 @@
+import React from 'react';
+interface Props {
+    value: string;
+    className?: string;
+    onChange?: (value: string) => void;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<any>, keyof Props>;
+export type FieldsetGroupProps = Props & NativeAttrs;
+declare const FieldsetGroup: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default FieldsetGroup;

package/esm/fieldset/fieldset-group.js

@@ -0,0 +1,79 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children", "value", "onChange"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useCallback, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import useCurrentState from '../utils/use-current-state';
+import { FieldsetContext } from './fieldset-context';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var FieldsetGroupComponent = function FieldsetGroupComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    value = _ref.value,
+    onChange = _ref.onChange,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useState = useState(value),
+    _useState2 = _slicedToArray(_useState, 2),
+    selfVal = _useState2[0],
+    setSelfVal = _useState2[1];
+  var _useCurrentState = useCurrentState([]),
+    _useCurrentState2 = _slicedToArray(_useCurrentState, 3),
+    items = _useCurrentState2[0],
+    setItems = _useCurrentState2[1],
+    ref = _useCurrentState2[2];
+  var classes = useClasses('group', className);
+  var register = function register(newItem) {
+    var hasItem = ref.current.find(function (item) {
+      return item.value === newItem.value;
+    });
+    if (hasItem) {
+      useWarning('The "value" of each "Fieldset" must be unique.', 'Fieldset');
+    }
+    setItems([].concat(_toConsumableArray(ref.current), [newItem]));
+  };
+  var providerValue = useMemo(function () {
+    return {
+      currentValue: selfVal,
+      inGroup: true,
+      register: register
+    };
+  }, [selfVal]);
+  var clickHandle = useCallback(function (nextValue) {
+    setSelfVal(nextValue);
+    onChange && onChange(nextValue);
+  }, [onChange]);
+  return /*#__PURE__*/React.createElement(FieldsetContext.Provider, {
+    value: providerValue
+  }, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-tabs"
+  }, items.map(function (item) {
+    return /*#__PURE__*/React.createElement("button", {
+      onClick: function onClick() {
+        return clickHandle(item.value);
+      },
+      key: item.value,
+      className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + ((selfVal === item.value ? 'active' : '') || "")
+    }, item.label);
+  })), /*#__PURE__*/React.createElement("div", {
+    className: _JSXStyle.dynamic([["3411776855", [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]]]) + " " + "group-content"
+  }, children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3411776855",
+    dynamic: [SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0, 0), SCALES.ml(0), SCALES.font(1), theme.palette.accents_3, theme.palette.accents_1, theme.palette.border, theme.palette.background, theme.palette.foreground, theme.layout.radius, theme.layout.radius]
+  }, ".group.__jsx-style-dynamic-selector{width:".concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0, 0), " ").concat(SCALES.ml(0), ";}.group-tabs.__jsx-style-dynamic-selector{white-space:nowrap;overflow-y:hidden;overflow-x:auto;font-size:").concat(SCALES.font(1), ";margin-bottom:-1px;}.group-content.__jsx-style-dynamic-selector{border-top-left-radius:0;overflow:hidden;}.group-content.__jsx-style-dynamic-selector .fieldset{border-top-left-radius:0;}button.__jsx-style-dynamic-selector{height:2.7em;line-height:2.7em;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;color:").concat(theme.palette.accents_3, ";background-color:").concat(theme.palette.accents_1, ";font-size:0.875em;white-space:nowrap;text-transform:capitalize;-webkit-appearance:none;cursor:pointer;margin:0;padding:0 1.45em;overflow:hidden;-webkit-transition:all 0.2s ease 0s;transition:all 0.2s ease 0s;border-radius:0;border:1px solid ").concat(theme.palette.border, ";-webkit-text-decoration:none;text-decoration:none;outline:none;}button.active.__jsx-style-dynamic-selector{border-bottom-color:transparent;background-color:").concat(theme.palette.background, ";color:").concat(theme.palette.foreground, ";cursor:default;}button.__jsx-style-dynamic-selector:first-of-type{border-top-left-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector:last-of-type{border-top-right-radius:").concat(theme.layout.radius, ";}button.__jsx-style-dynamic-selector+button.__jsx-style-dynamic-selector{border-left:0;}"))));
+};
+FieldsetGroupComponent.displayName = 'FieldsetGroup';
+var FieldsetGroup = withScale(FieldsetGroupComponent);
+export default FieldsetGroup;

package/esm/fieldset/fieldset-subtitle.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type FieldsetSubtitleProps = Props & NativeAttrs;
+declare const FieldsetSubtitle: React.FC<React.PropsWithChildren<FieldsetSubtitleProps>>;
+export default FieldsetSubtitle;

package/esm/fieldset/fieldset-subtitle.js

@@ -0,0 +1,18 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+var FieldsetSubtitle = function FieldsetSubtitle(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: "jsx-2265168013" + " " + (props && props.className != null && props.className || className || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "2265168013"
+  }, "div.jsx-2265168013{font-size:0.875em;line-height:1.6;-webkit-letter-spacing:-0.005625em;-moz-letter-spacing:-0.005625em;-ms-letter-spacing:-0.005625em;letter-spacing:-0.005625em;margin:0.75em 0;}"));
+};
+FieldsetSubtitle.displayName = 'FieldsetSubtitle';
+export default FieldsetSubtitle;

package/esm/fieldset/fieldset-title.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface Props {
+    className?: string;
+}
+type NativeAttrs = Omit<React.HTMLAttributes<HTMLDivElement>, keyof Props>;
+export type FieldsetTitleProps = Props & NativeAttrs;
+declare const FieldsetTitle: React.FC<React.PropsWithChildren<FieldsetTitleProps>>;
+export default FieldsetTitle;

package/esm/fieldset/fieldset-title.js

@@ -0,0 +1,20 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "children"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React from 'react';
+import useClasses from '../use-classes';
+var FieldsetTitle = function FieldsetTitle(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var classes = useClasses('title', className);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: "jsx-4105044205" + " " + (props && props.className != null && props.className || classes || "")
+  }), children), /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "4105044205"
+  }, ".title.jsx-4105044205{line-height:1.5;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;word-break:break-word;font-weight:600;-webkit-letter-spacing:-0.020625em;-moz-letter-spacing:-0.020625em;-ms-letter-spacing:-0.020625em;letter-spacing:-0.020625em;font-size:1.25em;width:auto;}"));
+};
+FieldsetTitle.displayName = 'FieldsetTitle';
+export default FieldsetTitle;

package/esm/fieldset/fieldset.d.ts

@@ -0,0 +1,46 @@
+import React, { ReactNode } from 'react';
+interface Props {
+    value?: string;
+    label?: string;
+    title?: string | ReactNode;
+    subtitle?: string | ReactNode;
+    className?: string;
+}
+type NativeAttrs = Omit<React.FieldsetHTMLAttributes<any>, keyof Props>;
+export type FieldsetProps = Props & NativeAttrs;
+declare const Fieldset: React.ForwardRefExoticComponent<Props & NativeAttrs & {
+    children?: React.ReactNode;
+} & {
+    width?: string | number | undefined;
+    height?: string | number | undefined;
+    padding?: string | number | undefined;
+    margin?: string | number | undefined;
+    w?: string | number | undefined;
+    h?: string | number | undefined;
+    paddingLeft?: string | number | undefined;
+    paddingRight?: string | number | undefined;
+    paddingTop?: string | number | undefined;
+    paddingBottom?: string | number | undefined;
+    pl?: string | number | undefined;
+    pr?: string | number | undefined;
+    pt?: string | number | undefined;
+    pb?: string | number | undefined;
+    marginLeft?: string | number | undefined;
+    marginRight?: string | number | undefined;
+    marginTop?: string | number | undefined;
+    marginBottom?: string | number | undefined;
+    ml?: string | number | undefined;
+    mr?: string | number | undefined;
+    mt?: string | number | undefined;
+    mb?: string | number | undefined;
+    px?: string | number | undefined;
+    py?: string | number | undefined;
+    mx?: string | number | undefined;
+    my?: string | number | undefined;
+    font?: string | number | undefined;
+    unit?: string | undefined;
+    scale?: number | undefined;
+    children?: any;
+    className?: string | undefined;
+} & React.InputHTMLAttributes<any> & React.RefAttributes<unknown>>;
+export default Fieldset;

package/esm/fieldset/fieldset.js

@@ -0,0 +1,84 @@
+"use client";
+
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["className", "title", "subtitle", "children", "value", "label"];
+import _JSXStyle from "../styled-jsx.es.js";
+import React, { useEffect, useMemo, useState } from 'react';
+import useTheme from '../use-theme';
+import FieldsetTitle from './fieldset-title';
+import FieldsetSubtitle from './fieldset-subtitle';
+import FieldsetFooter from './fieldset-footer';
+import FieldsetContent from './fieldset-content';
+import { hasChild, pickChild } from '../utils/collections';
+import { useFieldset } from './fieldset-context';
+import useWarning from '../utils/use-warning';
+import useScale, { withScale } from '../use-scale';
+import useClasses from '../use-classes';
+var FieldsetComponent = function FieldsetComponent(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? '' : _ref$title,
+    _ref$subtitle = _ref.subtitle,
+    subtitle = _ref$subtitle === void 0 ? '' : _ref$subtitle,
+    children = _ref.children,
+    _ref$value = _ref.value,
+    value = _ref$value === void 0 ? '' : _ref$value,
+    _ref$label = _ref.label,
+    label = _ref$label === void 0 ? '' : _ref$label,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var theme = useTheme();
+  var _useScale = useScale(),
+    SCALES = _useScale.SCALES;
+  var _useFieldset = useFieldset(),
+    inGroup = _useFieldset.inGroup,
+    currentValue = _useFieldset.currentValue,
+    register = _useFieldset.register;
+  var _useState = useState(inGroup),
+    _useState2 = _slicedToArray(_useState, 2),
+    hidden = _useState2[0],
+    setHidden = _useState2[1];
+  var classes = useClasses('fieldset', className);
+  var _pickChild = pickChild(children, FieldsetFooter),
+    _pickChild2 = _slicedToArray(_pickChild, 2),
+    withoutFooterChildren = _pickChild2[0],
+    FooterChildren = _pickChild2[1];
+  var hasTitle = hasChild(withoutFooterChildren, FieldsetTitle);
+  var hasSubtitle = hasChild(withoutFooterChildren, FieldsetSubtitle);
+  var hasContent = hasChild(withoutFooterChildren, FieldsetContent);
+  if (inGroup) {
+    if (!label) {
+      useWarning('Props "label" is required when in a group.', 'Fieldset Group');
+    }
+    if (!value || value === '') {
+      value = label;
+    }
+    useEffect(function () {
+      register && register({
+        value: value,
+        label: label
+      });
+    }, []);
+    useEffect(function () {
+      // In a few cases, the user will set Fieldset state manually.
+      // If the user incorrectly set the state, Group component should ignore it.
+      /* istanbul ignore if */
+      if (!currentValue || currentValue === '') return;
+      setHidden(currentValue !== value);
+    }, [currentValue]);
+  }
+  var content = useMemo(function () {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, withoutFooterChildren, !hasTitle && title && /*#__PURE__*/React.createElement(FieldsetTitle, null, title), !hasSubtitle && subtitle && /*#__PURE__*/React.createElement(FieldsetSubtitle, null, subtitle));
+  }, [withoutFooterChildren, hasTitle, hasSubtitle, title, subtitle]);
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _JSXStyle.dynamic([["3253250630", [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]]]) + " " + (props && props.className != null && props.className || classes || "")
+  }), hasContent ? content : /*#__PURE__*/React.createElement(FieldsetContent, null, content), FooterChildren && FooterChildren, /*#__PURE__*/React.createElement(_JSXStyle, {
+    id: "3253250630",
+    dynamic: [theme.palette.background, theme.palette.border, theme.layout.radius, hidden ? 'none' : 'block', SCALES.font(1), SCALES.width(1, 'auto'), SCALES.height(1, 'auto'), SCALES.pt(0), SCALES.pr(0), SCALES.pb(0), SCALES.pl(0), SCALES.mt(0), SCALES.mr(0), SCALES.mb(0), SCALES.ml(0)]
+  }, ".fieldset.__jsx-style-dynamic-selector{background-color:".concat(theme.palette.background, ";border:1px solid ").concat(theme.palette.border, ";border-radius:").concat(theme.layout.radius, ";overflow:hidden;display:").concat(hidden ? 'none' : 'block', ";font-size:").concat(SCALES.font(1), ";width:").concat(SCALES.width(1, 'auto'), ";height:").concat(SCALES.height(1, 'auto'), ";padding:").concat(SCALES.pt(0), " ").concat(SCALES.pr(0), " ").concat(SCALES.pb(0), " ").concat(SCALES.pl(0), ";margin:").concat(SCALES.mt(0), " ").concat(SCALES.mr(0), " ").concat(SCALES.mb(0), " ").concat(SCALES.ml(0), ";}")));
+};
+FieldsetComponent.displayName = 'Fieldset';
+var Fieldset = withScale(FieldsetComponent);
+export default Fieldset;

package/esm/fieldset/index.d.ts

@@ -0,0 +1,22 @@
+import Fieldset from "./fieldset";
+import FieldsetTitle from "./fieldset-title";
+import FieldsetSubtitle from "./fieldset-subtitle";
+import FieldsetFooter from "./fieldset-footer";
+import FieldsetGroup from "./fieldset-group";
+import FieldsetContent from "./fieldset-content";
+export type FieldsetComponentType = typeof Fieldset & {
+    Title: typeof FieldsetTitle;
+    Subtitle: typeof FieldsetSubtitle;
+    Footer: typeof FieldsetFooter;
+    Group: typeof FieldsetGroup;
+    Content: typeof FieldsetContent;
+    Body: typeof FieldsetContent;
+};
+export type { FieldsetProps } from "./fieldset";
+export type { FieldsetTitleProps } from "./fieldset-title";
+export type { FieldsetSubtitleProps } from "./fieldset-subtitle";
+export type { FieldsetGroupProps } from "./fieldset-group";
+export type { FieldsetFooterProps } from "./fieldset-footer";
+export type { FieldsetContentProps } from "./fieldset-content";
+declare const _default: FieldsetComponentType;
+export default _default;

package/esm/fieldset/index.js

@@ -0,0 +1,15 @@
+"use client";
+
+import Fieldset from './fieldset';
+import FieldsetTitle from './fieldset-title';
+import FieldsetSubtitle from './fieldset-subtitle';
+import FieldsetFooter from './fieldset-footer';
+import FieldsetGroup from './fieldset-group';
+import FieldsetContent from './fieldset-content';
+Fieldset.Title = FieldsetTitle;
+Fieldset.Subtitle = FieldsetSubtitle;
+Fieldset.Footer = FieldsetFooter;
+Fieldset.Group = FieldsetGroup;
+Fieldset.Content = FieldsetContent;
+Fieldset.Body = FieldsetContent;
+export default Fieldset;

package/esm/form/ErrorMessage.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="hoist-non-react-statics" />
+import * as React from 'react';
+import { FormikContextType } from "./types";
+export interface ErrorMessageProps {
+    id?: string;
+    name: string;
+    className?: string;
+    component?: string | React.ComponentType;
+    children?: (errorMessage: string) => React.ReactNode;
+    render?: (errorMessage: string) => React.ReactNode;
+}
+export declare const ErrorMessage: React.FC<ErrorMessageProps> & import("hoist-non-react-statics").NonReactStatics<React.ComponentClass<ErrorMessageProps & {
+    formik: FormikContextType<ErrorMessageProps & {
+        formik: FormikContextType<any>;
+    }>;
+}, any>, {}>;
+export default ErrorMessage;

package/esm/form/ErrorMessage.js

@@ -0,0 +1,45 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+var _excluded = ["component", "formik", "render", "children", "name"];
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+import * as React from 'react';
+import { getIn, isFunction } from './utils';
+import connect from './connect';
+var ErrorMessageImpl = /*#__PURE__*/function (_React$Component) {
+  function ErrorMessageImpl() {
+    _classCallCheck(this, ErrorMessageImpl);
+    return _callSuper(this, ErrorMessageImpl, arguments);
+  }
+  _inherits(ErrorMessageImpl, _React$Component);
+  return _createClass(ErrorMessageImpl, [{
+    key: "shouldComponentUpdate",
+    value: function shouldComponentUpdate(props) {
+      if (getIn(this.props.formik.errors, this.props.name) !== getIn(props.formik.errors, this.props.name) || getIn(this.props.formik.touched, this.props.name) !== getIn(props.formik.touched, this.props.name) || Object.keys(this.props).length !== Object.keys(props).length) {
+        return true;
+      } else {
+        return false;
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        component = _this$props.component,
+        formik = _this$props.formik,
+        render = _this$props.render,
+        children = _this$props.children,
+        name = _this$props.name,
+        rest = _objectWithoutProperties(_this$props, _excluded);
+      var touch = getIn(formik.touched, name);
+      var error = getIn(formik.errors, name);
+      return !!touch && !!error ? render ? isFunction(render) ? render(error) : null : children ? isFunction(children) ? children(error) : null : component ? /*#__PURE__*/React.createElement(component, rest, error) : error : null;
+    }
+  }]);
+}(React.Component);
+export var ErrorMessage = connect(ErrorMessageImpl);
+export default ErrorMessage;