@dscout/particle 1.0.0-alpha.21 → 1.0.0-alpha.23

package/lib/cjs/components/button_control.js

@@ -29,9 +29,10 @@ exports.ButtonControl = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 function ButtonControl(_a) {
-    var _modifierClass = _a._modifierClass, active = _a.active, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, name = _a.name, onClick = _a.onClick, title = _a.title, rest = __rest(_a, ["_modifierClass", "active", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "name", "onClick", "title"]);
-    var className = (0, class_names_1.default)('Button__Control', _modifierClass, {
+    var _modifierClass = _a._modifierClass, active = _a.active, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, title = _a.title, rest = __rest(_a, ["_modifierClass", "active", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "margin", "name", "onClick", "title"]);
+    var className = (0, class_names_1.default)('Button__Control', _modifierClass, (0, modifier_classes_1.getMarginClass)(margin), {
         'Button__Control--active': active
     });
     return (react_1.default.createElement("button", __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: className, disabled: disabled, id: id, name: name, onClick: onClick, ref: getRef, title: title, type: "button" }), children));

package/lib/cjs/components/button_control.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_control.js","sourceRoot":"","sources":["../../../src/components/button_control.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAezD,SAAgB,aAAa,CAAC,EAgBT;IAfnB,IAAA,cAAc,oBAAA,EACd,MAAM,YAAA,EACW,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,KAAK,WAAA,EACF,IAAI,cAfqB,uLAgB7B,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,iBAAiB,EAAE,cAAc,EAAE;QAC9D,yBAAyB,EAAE,MAAM;KAClC,CAAC,CAAC;IAEH,OAAO,CACL,qDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AAzCD,sCAyCC"}
+{"version":3,"file":"button_control.js","sourceRoot":"","sources":["../../../src/components/button_control.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAkB3D,SAAgB,aAAa,CAAC,EAiBT;IAhBnB,IAAA,cAAc,oBAAA,EACd,MAAM,YAAA,EACW,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,KAAK,WAAA,EACF,IAAI,cAhBqB,iMAiB7B,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAC1B,iBAAiB,EACjB,cAAc,EACd,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB;QACE,yBAAyB,EAAE,MAAM;KAClC,CACF,CAAC;IAEF,OAAO,CACL,qDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,IAAI,EAAC,QAAQ,KAEZ,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AA/CD,sCA+CC"}

package/lib/cjs/components/button_icon.d.ts

@@ -1,20 +1,20 @@
 import React from 'react';
 import type { GetRef } from '../utils/refs';
-import type { CommonComponentProps, ModifierProps } from '../types';
-interface ButtonIconProps extends CommonComponentProps, ModifierProps {
+import type { Colors, CommonComponentProps, MarginModifierProp, ModifierClassProp, Radii } from '../types';
+interface ButtonIconProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     'aria-controls'?: string;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
     'aria-pressed'?: boolean;
-    bgColor?: string;
+    bgColor?: Colors;
     bgSize?: string | number;
-    borderColor?: string;
+    borderColor?: Colors;
     children?: React.ReactNode;
-    color?: string;
+    color?: Colors;
     disabled?: boolean;
     getRef?: GetRef<HTMLButtonElement>;
-    hoverBgColor?: string;
-    hoverBorderColor?: string;
-    hoverColor?: string;
+    hoverBgColor?: Colors;
+    hoverBorderColor?: Colors;
+    hoverColor?: Colors;
     hoverBgSize?: string | number;
     id?: string;
     linkComponent?: 'a' | React.ComponentType;
@@ -23,10 +23,10 @@ interface ButtonIconProps extends CommonComponentProps, ModifierProps {
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseUp?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
-    radius?: string;
+    radius?: Radii;
     refProp?: string;
     title?: string;
     type?: 'button' | 'submit';
 }
-export declare function ButtonIcon({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, bgColor, bgSize, borderColor, children, color, disabled, getRef, hoverBgColor, hoverBorderColor, hoverColor, hoverBgSize, id, linkComponent, linkProps, name, onClick, onMouseUp, radius, onMouseDown, refProp, title, type, ...rest }: ButtonIconProps): React.JSX.Element;
+export declare function ButtonIcon({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, bgColor, bgSize, borderColor, children, color, disabled, getRef, hoverBgColor, hoverBorderColor, hoverColor, hoverBgSize, id, linkComponent, linkProps, margin, name, onClick, onMouseUp, radius, onMouseDown, refProp, title, type, ...rest }: ButtonIconProps): React.JSX.Element;
 export {};

package/lib/cjs/components/button_icon.js

@@ -52,13 +52,14 @@ exports.ButtonIcon = void 0;
 var react_1 = __importStar(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 var common_button_1 = require("./common_button");
 var DEFAULT_COLOR = 'gray-1';
 var DEFAULT_HOVER_COLOR = 'main';
 var DEFAULT_DISABLED_COLOR = 'gray-3';
 var DEFAULT_RADIUS = 'circle';
 function ButtonIcon(_a) {
-    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], ariaPressed = _a["aria-pressed"], bgColor = _a.bgColor, bgSize = _a.bgSize, borderColor = _a.borderColor, children = _a.children, color = _a.color, disabled = _a.disabled, getRef = _a.getRef, hoverBgColor = _a.hoverBgColor, hoverBorderColor = _a.hoverBorderColor, hoverColor = _a.hoverColor, hoverBgSize = _a.hoverBgSize, id = _a.id, linkComponent = _a.linkComponent, linkProps = _a.linkProps, name = _a.name, onClick = _a.onClick, onMouseUp = _a.onMouseUp, radius = _a.radius, onMouseDown = _a.onMouseDown, refProp = _a.refProp, title = _a.title, type = _a.type, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-pressed', "bgColor", "bgSize", "borderColor", "children", "color", "disabled", "getRef", "hoverBgColor", "hoverBorderColor", "hoverColor", "hoverBgSize", "id", "linkComponent", "linkProps", "name", "onClick", "onMouseUp", "radius", "onMouseDown", "refProp", "title", "type"]);
+    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], ariaPressed = _a["aria-pressed"], bgColor = _a.bgColor, bgSize = _a.bgSize, borderColor = _a.borderColor, children = _a.children, color = _a.color, disabled = _a.disabled, getRef = _a.getRef, hoverBgColor = _a.hoverBgColor, hoverBorderColor = _a.hoverBorderColor, hoverColor = _a.hoverColor, hoverBgSize = _a.hoverBgSize, id = _a.id, linkComponent = _a.linkComponent, linkProps = _a.linkProps, margin = _a.margin, name = _a.name, onClick = _a.onClick, onMouseUp = _a.onMouseUp, radius = _a.radius, onMouseDown = _a.onMouseDown, refProp = _a.refProp, title = _a.title, type = _a.type, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-pressed', "bgColor", "bgSize", "borderColor", "children", "color", "disabled", "getRef", "hoverBgColor", "hoverBorderColor", "hoverColor", "hoverBgSize", "id", "linkComponent", "linkProps", "margin", "name", "onClick", "onMouseUp", "radius", "onMouseDown", "refProp", "title", "type"]);
     var _b = (0, react_1.useState)(false), hovered = _b[0], setHovered = _b[1];
     function getBgColorClass() {
         var colorEnum = bgColor;
@@ -97,7 +98,7 @@ function ButtonIcon(_a) {
         }
         return "rounded--".concat(radiusEnum);
     }
-    var btnClass = (0, class_names_1.default)('Button-Icon', getBgColorClass(), getColorClass(), getBorderColorClass(), getRadiusClass(), _modifierClass);
+    var btnClass = (0, class_names_1.default)('Button-Icon', getBgColorClass(), getColorClass(), getBorderColorClass(), getRadiusClass(), (0, modifier_classes_1.getMarginClass)(margin), _modifierClass);
     var style = {
         height: hovered ? hoverBgSize || bgSize : bgSize,
         width: hovered ? hoverBgSize || bgSize : bgSize

package/lib/cjs/components/button_icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_icon.js","sourceRoot":"","sources":["../../../src/components/button_icon.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"button_icon.js","sourceRoot":"","sources":["../../../src/components/button_icon.tsx"],"names":[],"mappings":"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"}

package/lib/cjs/components/button_mode.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { GetRef } from '../utils/refs';
-import type { CommonComponentProps, ModifierProps } from '../types';
-interface ButtonModeProps extends CommonComponentProps, ModifierProps {
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+interface ButtonModeProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     active?: boolean;
     'aria-controls'?: string;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
@@ -20,5 +20,5 @@ interface ButtonModeProps extends CommonComponentProps, ModifierProps {
     title?: string;
     type?: 'button' | 'submit';
 }
-export declare function ButtonMode({ _modifierClass, active, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, children, disabled, getRef, id, linkComponent, linkProps, name, onClick, onMouseUp, onMouseDown, refProp, title, type, ...rest }: ButtonModeProps): React.JSX.Element;
+export declare function ButtonMode({ _modifierClass, active, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, children, disabled, getRef, id, linkComponent, linkProps, margin, name, onClick, onMouseUp, onMouseDown, refProp, title, type, ...rest }: ButtonModeProps): React.JSX.Element;
 export {};

package/lib/cjs/components/button_mode.js

@@ -30,9 +30,10 @@ var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
 var common_button_1 = require("./common_button");
+var modifier_classes_1 = require("../utils/modifier_classes");
 function ButtonMode(_a) {
-    var _modifierClass = _a._modifierClass, active = _a.active, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], ariaPressed = _a["aria-pressed"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, linkComponent = _a.linkComponent, linkProps = _a.linkProps, name = _a.name, onClick = _a.onClick, onMouseUp = _a.onMouseUp, onMouseDown = _a.onMouseDown, refProp = _a.refProp, title = _a.title, type = _a.type, rest = __rest(_a, ["_modifierClass", "active", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-pressed', "children", "disabled", "getRef", "id", "linkComponent", "linkProps", "name", "onClick", "onMouseUp", "onMouseDown", "refProp", "title", "type"]);
-    var className = (0, class_names_1.default)('Button Button-Mode', _modifierClass, {
+    var _modifierClass = _a._modifierClass, active = _a.active, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], ariaPressed = _a["aria-pressed"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, linkComponent = _a.linkComponent, linkProps = _a.linkProps, margin = _a.margin, name = _a.name, onClick = _a.onClick, onMouseUp = _a.onMouseUp, onMouseDown = _a.onMouseDown, refProp = _a.refProp, title = _a.title, type = _a.type, rest = __rest(_a, ["_modifierClass", "active", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-pressed', "children", "disabled", "getRef", "id", "linkComponent", "linkProps", "margin", "name", "onClick", "onMouseUp", "onMouseDown", "refProp", "title", "type"]);
+    var className = (0, class_names_1.default)('Button Button-Mode', _modifierClass, (0, modifier_classes_1.getMarginClass)(margin), {
         'Button-Mode--selected': active
     });
     return (react_1.default.createElement(common_button_1.CommonButton, __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "aria-pressed": ariaPressed, className: className, disabled: disabled, getRef: getRef, id: id, linkComponent: linkComponent, linkProps: linkProps, name: name, onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, refProp: refProp, title: title, type: type }), children));

package/lib/cjs/components/button_mode.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_mode.js","sourceRoot":"","sources":["../../../src/components/button_mode.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAEzD,iDAA+C;AAsB/C,SAAgB,UAAU,CAAC,EAuBT;IAtBhB,IAAA,cAAc,oBAAA,EACd,MAAM,YAAA,EACW,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnB,WAAW,qBAAA,EAC3B,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,KAAK,WAAA,EACL,IAAI,UAAA,EACD,IAAI,cAtBkB,oRAuB1B,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,oBAAoB,EAAE,cAAc,EAAE;QACjE,uBAAuB,EAAE,MAAM;KAChC,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,4BAAY,eACP,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,kBACnB,WAAW,EACzB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,KAET,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC;AAtDD,gCAsDC"}
+{"version":3,"file":"button_mode.js","sourceRoot":"","sources":["../../../src/components/button_mode.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AAEzD,iDAA+C;AAC/C,8DAA2D;AAyB3D,SAAgB,UAAU,CAAC,EAwBT;IAvBhB,IAAA,cAAc,oBAAA,EACd,MAAM,YAAA,EACW,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnB,WAAW,qBAAA,EAC3B,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,SAAS,eAAA,EACT,WAAW,iBAAA,EACX,OAAO,aAAA,EACP,KAAK,WAAA,EACL,IAAI,UAAA,EACD,IAAI,cAvBkB,8RAwB1B,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAC1B,oBAAoB,EACpB,cAAc,EACd,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB;QACE,uBAAuB,EAAE,MAAM;KAChC,CACF,CAAC;IAEF,OAAO,CACL,8BAAC,4BAAY,eACP,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,kBACnB,WAAW,EACzB,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,EAAE,EAAE,EAAE,EACN,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,KAET,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC;AA5DD,gCA4DC"}

package/lib/cjs/components/button_plain.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { CommonComponentProps, ModifierProps } from '../types';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
 import type { GetRef } from '../utils/refs';
-interface ButtonPlainProps extends CommonComponentProps, ModifierProps {
+interface ButtonPlainProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     'aria-controls'?: string;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
     children?: React.ReactNode;
@@ -13,5 +13,5 @@ interface ButtonPlainProps extends CommonComponentProps, ModifierProps {
     title?: string;
     type?: 'button' | 'submit';
 }
-export declare function ButtonPlain({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, disabled, getRef, id, name, onClick, title, type, ...rest }: ButtonPlainProps): React.JSX.Element;
+export declare function ButtonPlain({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, disabled, getRef, id, margin, name, onClick, title, type, ...rest }: ButtonPlainProps): React.JSX.Element;
 export {};

package/lib/cjs/components/button_plain.js

@@ -29,9 +29,10 @@ exports.ButtonPlain = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 function ButtonPlain(_a) {
-    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, name = _a.name, onClick = _a.onClick, title = _a.title, _b = _a.type, type = _b === void 0 ? 'button' : _b, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "name", "onClick", "title", "type"]);
-    return (react_1.default.createElement("button", __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Button--plain', _modifierClass), disabled: disabled, id: id, ref: getRef, name: name, onClick: onClick, title: title, 
+    var _modifierClass = _a._modifierClass, ariaControls = _a["aria-controls"], ariaExpanded = _a["aria-expanded"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, title = _a.title, _b = _a.type, type = _b === void 0 ? 'button' : _b, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "margin", "name", "onClick", "title", "type"]);
+    return (react_1.default.createElement("button", __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": ariaControls, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Button--plain', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass), disabled: disabled, id: id, ref: getRef, name: name, onClick: onClick, title: title, 
         // eslint-disable-next-line react/button-has-type
         type: type }), children));
 }

package/lib/cjs/components/button_plain.js.map

@@ -1 +1 @@
-{"version":3,"file":"button_plain.js","sourceRoot":"","sources":["../../../src/components/button_plain.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAezD,SAAgB,WAAW,CAAC,EAgBT;IAfjB,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACZ,IAAI,cAfmB,qLAgB3B,CADQ;IAEP,OAAO,CACL,qDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EAAC,eAAe,EAAE,cAAc,CAAC,EACtD,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QACZ,iDAAiD;QACjD,IAAI,EAAE,IAAI,KAET,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AAtCD,kCAsCC"}
+{"version":3,"file":"button_plain.js","sourceRoot":"","sources":["../../../src/components/button_plain.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAkB3D,SAAgB,WAAW,CAAC,EAiBT;IAhBjB,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,KAAK,WAAA,EACL,YAAe,EAAf,IAAI,mBAAG,QAAQ,KAAA,EACZ,IAAI,cAhBmB,+LAiB3B,CADQ;IAEP,OAAO,CACL,qDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,YAAY,mBACZ,YAAY,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EACnB,eAAe,EACf,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,EACD,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,KAAK;QACZ,iDAAiD;QACjD,IAAI,EAAE,IAAI,KAET,QAAQ,CACF,CACV,CAAC;AACJ,CAAC;AA3CD,kCA2CC"}

package/lib/cjs/components/card.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { GetRef } from '../utils/refs';
-import type { CommonComponentProps, ModifierProps } from '../types';
-interface CardProps extends CommonComponentProps, ModifierProps {
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+interface CardProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     borderColor?: string;
     borderPosition?: 'all' | 'bottom' | 'left' | 'right' | 'top';
     children?: React.ReactNode;
@@ -21,5 +21,5 @@ interface CardProps extends CommonComponentProps, ModifierProps {
         max?: number | string;
     };
 }
-export declare function Card({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, borderColor, borderPosition, children, getRef, height, id, linkComponent, linkProps, refProp, width, ...rest }: CardProps): React.JSX.Element;
+export declare function Card({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, borderColor, borderPosition, children, getRef, height, id, linkComponent, linkProps, margin, refProp, width, ...rest }: CardProps): React.JSX.Element;
 export {};

package/lib/cjs/components/card.js

@@ -30,6 +30,7 @@ var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var reject_1 = __importDefault(require("../utils/reject"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 var DISALLOWED_LINK_PROPS = ['className'];
 function sanitizeProps(props) {
     if (props)
@@ -37,8 +38,8 @@ function sanitizeProps(props) {
 }
 function Card(_a) {
     var _b, _c;
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], borderColor = _a.borderColor, _d = _a.borderPosition, borderPosition = _d === void 0 ? 'all' : _d, children = _a.children, getRef = _a.getRef, _e = _a.height, height = _e === void 0 ? {} : _e, id = _a.id, linkComponent = _a.linkComponent, linkProps = _a.linkProps, _f = _a.refProp, refProp = _f === void 0 ? 'ref' : _f, _g = _a.width, width = _g === void 0 ? {} : _g, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "borderColor", "borderPosition", "children", "getRef", "height", "id", "linkComponent", "linkProps", "refProp", "width"]);
-    var className = (0, class_names_1.default)('Card', _modifierClass, (_b = {},
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], borderColor = _a.borderColor, _d = _a.borderPosition, borderPosition = _d === void 0 ? 'all' : _d, children = _a.children, getRef = _a.getRef, _e = _a.height, height = _e === void 0 ? {} : _e, id = _a.id, linkComponent = _a.linkComponent, linkProps = _a.linkProps, margin = _a.margin, _f = _a.refProp, refProp = _f === void 0 ? 'ref' : _f, _g = _a.width, width = _g === void 0 ? {} : _g, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "borderColor", "borderPosition", "children", "getRef", "height", "id", "linkComponent", "linkProps", "margin", "refProp", "width"]);
+    var className = (0, class_names_1.default)('Card', _modifierClass, (0, modifier_classes_1.getMarginClass)(margin), (_b = {},
         _b["b-color--".concat(borderColor)] = borderColor,
         _b['Card--bordered'] = borderColor,
         _b["Card--bordered-".concat(borderPosition)] = borderColor && borderPosition,

package/lib/cjs/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,2DAAqC;AACrC,6EAAyD;AAuBzD,IAAM,qBAAqB,GAAG,CAAC,WAAW,CAAC,CAAC;AAE5C,SAAS,aAAa,CAAC,KAA6B;IAClD,IAAI,KAAK;QAAE,OAAO,IAAA,gBAAM,EAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC;AACzD,CAAC;AAED,SAAgB,IAAI,CAAC,EAgBT;;IAfV,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,WAAW,iBAAA,EACX,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACP,IAAI,cAfY,gMAgBpB,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,MAAM,EAAE,cAAc;QACjD,GAAC,mBAAY,WAAW,CAAE,IAAG,WAAW;QACxC,oBAAgB,GAAE,WAAW;QAC7B,GAAC,yBAAkB,cAAc,CAAE,IAAG,WAAW,IAAI,cAAc;YACnE,CAAC;IACH,IAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,WAAG,GAAC,OAAO,IAAG,MAAM,MAAG,CAAC,CAAC,EAAE,CAAC;IACrD,IAAM,SAAS,GAAG,aAAa,IAAI,KAAK,CAAC;IACjC,IAAM,UAAU,GAAqC,MAAM,KAA3C,EAAO,SAAS,GAAqB,MAAM,IAA3B,EAAO,SAAS,GAAK,MAAM,IAAX,CAAY;IAC5D,IAAM,SAAS,GAAmC,KAAK,KAAxC,EAAO,QAAQ,GAAoB,KAAK,IAAzB,EAAO,QAAQ,GAAK,KAAK,IAAV,CAAW;IAEhE,OAAO,CACL,8BAAC,SAAS,eACJ,aAAa,CAAC,SAAS,CAAC,EACxB,QAAQ,EACR,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE;YACL,MAAM,EAAE,UAAU;YAClB,SAAS,WAAA;YACT,SAAS,WAAA;YACT,KAAK,EAAE,SAAS;YAChB,QAAQ,UAAA;YACR,QAAQ,UAAA;SACT,KAEA,QAAQ,CACC,CACb,CAAC;AACJ,CAAC;AAjDD,oBAiDC"}
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../src/components/card.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,2DAAqC;AACrC,6EAAyD;AACzD,8DAA2D;AA0B3D,IAAM,qBAAqB,GAAG,CAAC,WAAW,CAAC,CAAC;AAE5C,SAAS,aAAa,CAAC,KAA6B;IAClD,IAAI,KAAK;QAAE,OAAO,IAAA,gBAAM,EAAC,KAAK,EAAE,qBAAqB,CAAC,CAAC;AACzD,CAAC;AAED,SAAgB,IAAI,CAAC,EAiBT;;IAhBV,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,WAAW,iBAAA,EACX,sBAAsB,EAAtB,cAAc,mBAAG,KAAK,KAAA,EACtB,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,cAAW,EAAX,MAAM,mBAAG,EAAE,KAAA,EACX,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,SAAS,eAAA,EACT,MAAM,YAAA,EACN,eAAe,EAAf,OAAO,mBAAG,KAAK,KAAA,EACf,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACP,IAAI,cAhBY,0MAiBpB,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,MAAM,EAAE,cAAc,EAAE,IAAA,iCAAc,EAAC,MAAM,CAAC;QACzE,GAAC,mBAAY,WAAW,CAAE,IAAG,WAAW;QACxC,oBAAgB,GAAE,WAAW;QAC7B,GAAC,yBAAkB,cAAc,CAAE,IAAG,WAAW,IAAI,cAAc;YACnE,CAAC;IACH,IAAM,QAAQ,GAAG,MAAM,CAAC,CAAC,WAAG,GAAC,OAAO,IAAG,MAAM,MAAG,CAAC,CAAC,EAAE,CAAC;IACrD,IAAM,SAAS,GAAG,aAAa,IAAI,KAAK,CAAC;IACjC,IAAM,UAAU,GAAqC,MAAM,KAA3C,EAAO,SAAS,GAAqB,MAAM,IAA3B,EAAO,SAAS,GAAK,MAAM,IAAX,CAAY;IAC5D,IAAM,SAAS,GAAmC,KAAK,KAAxC,EAAO,QAAQ,GAAoB,KAAK,IAAzB,EAAO,QAAQ,GAAK,KAAK,IAAV,CAAW;IAEhE,OAAO,CACL,8BAAC,SAAS,eACJ,aAAa,CAAC,SAAS,CAAC,EACxB,QAAQ,EACR,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,KAAK,EAAE;YACL,MAAM,EAAE,UAAU;YAClB,SAAS,WAAA;YACT,SAAS,WAAA;YACT,KAAK,EAAE,SAAS;YAChB,QAAQ,UAAA;YACR,QAAQ,UAAA;SACT,KAEA,QAAQ,CACC,CACb,CAAC;AACJ,CAAC;AAlDD,oBAkDC"}

package/lib/cjs/components/card_body.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
-import type { CommonComponentProps, ModifierProps } from '../types';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
 import type { GetRef } from '../utils/refs';
-interface CardBodyProps extends CommonComponentProps, ModifierProps {
+interface CardBodyProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     getRef?: GetRef<HTMLDivElement>;
     id?: string;
 }
-export declare function CardBody({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, getRef, id, ...rest }: CardBodyProps): React.JSX.Element;
+export declare function CardBody({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, getRef, id, margin, ...rest }: CardBodyProps): React.JSX.Element;
 export {};

package/lib/cjs/components/card_body.js

@@ -29,9 +29,10 @@ exports.CardBody = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 function CardBody(_a) {
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, getRef = _a.getRef, id = _a.id, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "getRef", "id"]);
-    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Card__Body', _modifierClass), id: id, ref: getRef }), children));
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, getRef = _a.getRef, id = _a.id, margin = _a.margin, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "getRef", "id", "margin"]);
+    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Card__Body', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass), id: id, ref: getRef }), children));
 }
 exports.CardBody = CardBody;
 //# sourceMappingURL=card_body.js.map

package/lib/cjs/components/card_body.js.map

@@ -1 +1 @@
-{"version":3,"file":"card_body.js","sourceRoot":"","sources":["../../../src/components/card_body.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAQzD,SAAgB,QAAQ,CAAC,EAST;IARd,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACC,IAAI,cARgB,mGASxB,CADQ;IAEP,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EAAC,YAAY,EAAE,cAAc,CAAC,EACnD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,KAEV,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAvBD,4BAuBC"}
+{"version":3,"file":"card_body.js","sourceRoot":"","sources":["../../../src/components/card_body.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAW3D,SAAgB,QAAQ,CAAC,EAUT;IATd,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACH,IAAI,cATgB,6GAUxB,CADQ;IAEP,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EACnB,YAAY,EACZ,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,EACD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,KAEV,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AA5BD,4BA4BC"}

package/lib/cjs/components/card_footer.d.ts

@@ -1,11 +1,11 @@
 import React from 'react';
 import type { GetRef } from '../utils/refs';
-import type { CommonComponentProps, ModifierProps } from '../types';
-interface CardFooterProps extends CommonComponentProps, ModifierProps {
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+interface CardFooterProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     hasDivider?: boolean;
     getRef?: GetRef<HTMLDivElement>;
     id?: string;
 }
-export declare function CardFooter({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, hasDivider, getRef, id, ...rest }: CardFooterProps): React.JSX.Element;
+export declare function CardFooter({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, hasDivider, getRef, id, margin, ...rest }: CardFooterProps): React.JSX.Element;
 export {};

package/lib/cjs/components/card_footer.js

@@ -29,9 +29,10 @@ exports.CardFooter = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 function CardFooter(_a) {
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, _b = _a.hasDivider, hasDivider = _b === void 0 ? true : _b, getRef = _a.getRef, id = _a.id, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "hasDivider", "getRef", "id"]);
-    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Card__Footer', _modifierClass), id: id, ref: getRef, style: hasDivider ? undefined : { borderTop: 'none' } }), children));
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, _b = _a.hasDivider, hasDivider = _b === void 0 ? true : _b, getRef = _a.getRef, id = _a.id, margin = _a.margin, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "hasDivider", "getRef", "id", "margin"]);
+    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Card__Footer', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass), id: id, ref: getRef, style: hasDivider ? undefined : { borderTop: 'none' } }), children));
 }
 exports.CardFooter = CardFooter;
 //# sourceMappingURL=card_footer.js.map

package/lib/cjs/components/card_footer.js.map

@@ -1 +1 @@
-{"version":3,"file":"card_footer.js","sourceRoot":"","sources":["../../../src/components/card_footer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AASzD,SAAgB,UAAU,CAAC,EAUT;IAThB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,MAAM,YAAA,EACN,EAAE,QAAA,EACC,IAAI,cATkB,iHAU1B,CADQ;IAEP,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EAAC,cAAc,EAAE,cAAc,CAAC,EACrD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAEpD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAzBD,gCAyBC"}
+{"version":3,"file":"card_footer.js","sourceRoot":"","sources":["../../../src/components/card_footer.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAY3D,SAAgB,UAAU,CAAC,EAWT;IAVhB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,kBAAiB,EAAjB,UAAU,mBAAG,IAAI,KAAA,EACjB,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACH,IAAI,cAVkB,2HAW1B,CADQ;IAEP,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EACnB,cAAc,EACd,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,EACD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,KAEpD,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AA9BD,gCA8BC"}

package/lib/cjs/components/cards.d.ts

@@ -1,10 +1,10 @@
 import React from 'react';
 import type { GetRef } from '../utils/refs';
-import type { CommonComponentProps, ModifierProps } from '../types';
-interface CardsProps extends CommonComponentProps, ModifierProps {
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+interface CardsProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     getRef?: GetRef<HTMLDivElement>;
     id?: string;
 }
-export declare function Cards({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, getRef, id, ...rest }: CardsProps): React.JSX.Element;
+export declare function Cards({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, getRef, id, margin, ...rest }: CardsProps): React.JSX.Element;
 export {};

package/lib/cjs/components/cards.js

@@ -29,9 +29,10 @@ exports.Cards = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 function Cards(_a) {
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, getRef = _a.getRef, id = _a.id, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "getRef", "id"]);
-    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Cards', _modifierClass), id: id, ref: getRef }), children));
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, getRef = _a.getRef, id = _a.id, margin = _a.margin, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "getRef", "id", "margin"]);
+    return (react_1.default.createElement("div", __assign({}, (0, data_attributes_1.default)(rest), { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, className: (0, class_names_1.default)('Cards', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass), id: id, ref: getRef }), children));
 }
 exports.Cards = Cards;
 //# sourceMappingURL=cards.js.map

package/lib/cjs/components/cards.js.map

@@ -1 +1 @@
-{"version":3,"file":"cards.js","sourceRoot":"","sources":["../../../src/components/cards.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAQzD,SAAgB,KAAK,CAAC,EAST;IARX,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACC,IAAI,cARa,mGASrB,CADQ;IAEP,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EAAC,OAAO,EAAE,cAAc,CAAC,EAC9C,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,KAEV,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAvBD,sBAuBC"}
+{"version":3,"file":"cards.js","sourceRoot":"","sources":["../../../src/components/cards.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAW3D,SAAgB,KAAK,CAAC,EAUT;IATX,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACH,IAAI,cATa,6GAUrB,CADQ;IAEP,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EAAC,OAAO,EAAE,IAAA,iCAAc,EAAC,MAAM,CAAC,EAAE,cAAc,CAAC,EACtE,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,KAEV,QAAQ,CACL,CACP,CAAC;AACJ,CAAC;AAxBD,sBAwBC"}

package/lib/cjs/components/checkbox_input.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
 import type { GetRef } from '../utils/refs';
-import type { Colors, CommonComponentProps, ModifierProps } from '../types';
-interface CheckboxInputProps extends CommonComponentProps, ModifierProps {
+import type { Colors, CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
+interface CheckboxInputProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    'aria-required'?: React.AriaAttributes['aria-required'];
     checked?: boolean;
     color?: Colors;
     defaultChecked?: boolean;
@@ -14,8 +15,9 @@ interface CheckboxInputProps extends CommonComponentProps, ModifierProps {
     name?: string;
     onChange?: React.ChangeEventHandler<HTMLInputElement>;
     readOnly?: boolean;
+    required?: boolean;
     tabIndex?: number;
     value?: number | string;
 }
-export declare function CheckboxInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, checked, color, defaultChecked, disabled, getRef, id, indeterminate, label, name, onChange, readOnly, tabIndex, value, ...rest }: CheckboxInputProps): React.JSX.Element;
+export declare function CheckboxInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-required': ariaRequired, checked, color, defaultChecked, disabled, getRef, id, indeterminate, label, margin, name, onChange, readOnly, required, tabIndex, value, ...rest }: CheckboxInputProps): React.JSX.Element;
 export {};

package/lib/cjs/components/checkbox_input.js

@@ -31,6 +31,7 @@ var class_names_1 = __importDefault(require("../utils/class_names"));
 var forms_1 = require("../utils/forms");
 var refs_1 = require("../utils/refs");
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 var shared_hooks_1 = require("./shared_hooks");
 var checkbox_check_1 = require("../icons/checkbox_check");
 var checkbox_indeterminate_1 = require("../icons/checkbox_indeterminate");
@@ -40,13 +41,13 @@ function renderIcon(checked, indeterminate, readOnly) {
     return react_1.default.createElement(checkbox_check_1.IconCheckboxCheck, { "aria-hidden": true });
 }
 function CheckboxInput(_a) {
-    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], checked = _a.checked, _b = _a.color, color = _b === void 0 ? 'dscout' : _b, defaultChecked = _a.defaultChecked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, indeterminate = _a.indeterminate, label = _a.label, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "checked", "color", "defaultChecked", "disabled", "getRef", "id", "indeterminate", "label", "name", "onChange", "readOnly", "tabIndex", "value"]);
+    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaRequired = _a["aria-required"], checked = _a.checked, _b = _a.color, color = _b === void 0 ? 'dscout' : _b, defaultChecked = _a.defaultChecked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, indeterminate = _a.indeterminate, label = _a.label, margin = _a.margin, name = _a.name, onChange = _a.onChange, readOnly = _a.readOnly, required = _a.required, tabIndex = _a.tabIndex, value = _a.value, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', 'aria-required', "checked", "color", "defaultChecked", "disabled", "getRef", "id", "indeterminate", "label", "margin", "name", "onChange", "readOnly", "required", "tabIndex", "value"]);
     var checkboxId = (0, shared_hooks_1.useFallbackId)(id);
-    var className = (0, class_names_1.default)('Selector', _modifierClass, {
+    var className = (0, class_names_1.default)('Selector', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass, {
         'Selector--with-label': label
     });
     return (react_1.default.createElement("div", { className: className },
-        react_1.default.createElement("input", __assign({}, (0, data_attributes_1.default)(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, checked: checked, className: "Selector__Checkbox", defaultChecked: defaultChecked, disabled: disabled || readOnly, id: checkboxId, name: name, onChange: onChange, readOnly: readOnly, ref: function (ref) {
+        react_1.default.createElement("input", __assign({}, (0, data_attributes_1.default)(rest), { "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-required": ariaRequired, checked: checked, className: "Selector__Checkbox", defaultChecked: defaultChecked, disabled: disabled || readOnly, id: checkboxId, name: name, onChange: onChange, readOnly: readOnly, required: required, ref: function (ref) {
                 if (ref)
                     ref.indeterminate = indeterminate;
                 (0, refs_1.handleGetRef)(getRef, ref);

package/lib/cjs/components/checkbox_input.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox_input.js","sourceRoot":"","sources":["../../../src/components/checkbox_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,wCAA4C;AAC5C,sCAA6C;AAC7C,6EAAyD;AAEzD,+CAA+C;AAE/C,0DAA4D;AAC5D,0EAA4E;AAmB5E,SAAS,UAAU,CACjB,OAAgB,EAChB,aAAsB,EACtB,QAAiB;IAEjB,IAAI,aAAa,IAAI,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC;QACzC,OAAO,8BAAC,kDAAyB,0BAAe,CAAC;IAEnD,OAAO,8BAAC,kCAAiB,0BAAe,CAAC;AAC3C,CAAC;AAED,SAAgB,aAAa,CAAC,EAoBT;IAnBnB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,OAAO,aAAA,EACP,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAnBqB,wOAoB7B,CADQ;IAEP,IAAM,UAAU,GAAG,IAAA,4BAAa,EAAC,EAAE,CAAC,CAAC;IACrC,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,UAAU,EAAE,cAAc,EAAE;QACvD,sBAAsB,EAAE,KAAK;KAC9B,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS;QACvB,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,EAC/B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,oBAAoB,EAC9B,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,UAAC,GAAG;gBACP,IAAI,GAAG;oBAAE,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC;gBAC3C,IAAA,mBAAY,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,EAAE,QAAQ,CAAC,IAClC;QACF,uCAAK,SAAS,EAAE,IAAA,qBAAU,EAAC,iBAAiB,EAAE,iBAAU,KAAK,CAAE,CAAC,GAAI;QACnE,KAAK,IAAI,CACR,yCAAO,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,UAAU,IACnD,KAAK,CACA,CACT;QACA,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,CACzC,CACP,CAAC;AACJ,CAAC;AA3DD,sCA2DC"}
+{"version":3,"file":"checkbox_input.js","sourceRoot":"","sources":["../../../src/components/checkbox_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAU1B,qEAA8C;AAC9C,wCAA4C;AAC5C,sCAA6C;AAC7C,6EAAyD;AACzD,8DAA2D;AAE3D,+CAA+C;AAE/C,0DAA4D;AAC5D,0EAA4E;AAwB5E,SAAS,UAAU,CACjB,OAAgB,EAChB,aAAsB,EACtB,QAAiB;IAEjB,IAAI,aAAa,IAAI,CAAC,CAAC,OAAO,IAAI,QAAQ,CAAC;QACzC,OAAO,8BAAC,kDAAyB,0BAAe,CAAC;IAEnD,OAAO,8BAAC,kCAAiB,0BAAe,CAAC;AAC3C,CAAC;AAED,SAAgB,aAAa,CAAC,EAuBT;IAtBnB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EAChB,YAAY,sBAAA,EAC7B,OAAO,aAAA,EACP,aAAgB,EAAhB,KAAK,mBAAG,QAAQ,KAAA,EAChB,cAAc,oBAAA,EACd,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,aAAa,mBAAA,EACb,KAAK,WAAA,EACL,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,KAAK,WAAA,EACF,IAAI,cAtBqB,+QAuB7B,CADQ;IAEP,IAAM,UAAU,GAAG,IAAA,4BAAa,EAAC,EAAE,CAAC,CAAC;IACrC,IAAM,SAAS,GAAG,IAAA,qBAAU,EAC1B,UAAU,EACV,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,EACd;QACE,sBAAsB,EAAE,KAAK;KAC9B,CACF,CAAC;IAEF,OAAO,CACL,uCAAK,SAAS,EAAE,SAAS;QACvB,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,wBACT,eAAe,kBACnB,WAAW,gBACb,SAAS,qBACJ,cAAc,mBAChB,YAAY,EAC3B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAC,oBAAoB,EAC9B,cAAc,EAAE,cAAc,EAC9B,QAAQ,EAAE,QAAQ,IAAI,QAAQ,EAC9B,EAAE,EAAE,UAAU,EACd,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,UAAC,GAAG;gBACP,IAAI,GAAG;oBAAE,GAAG,CAAC,aAAa,GAAG,aAAa,CAAC;gBAC3C,IAAA,mBAAY,EAAC,MAAM,EAAE,GAAG,CAAC,CAAC;YAC5B,CAAC,EACD,QAAQ,EAAE,QAAQ,EAClB,IAAI,EAAC,UAAU,EACf,KAAK,EAAE,IAAA,kBAAU,EAAC,KAAK,EAAE,QAAQ,CAAC,IAClC;QACF,uCAAK,SAAS,EAAE,IAAA,qBAAU,EAAC,iBAAiB,EAAE,iBAAU,KAAK,CAAE,CAAC,GAAI;QACnE,KAAK,IAAI,CACR,yCAAO,SAAS,EAAC,iBAAiB,EAAC,OAAO,EAAE,UAAU,IACnD,KAAK,CACA,CACT;QACA,UAAU,CAAC,OAAO,EAAE,aAAa,EAAE,QAAQ,CAAC,CACzC,CACP,CAAC;AACJ,CAAC;AArED,sCAqEC"}

package/lib/cjs/components/chip.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { Colors, CommonComponentProps, ModifierProps } from '../types';
+import type { Colors, CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
 import type { GetRef } from '../utils/refs';
-interface ChipProps extends CommonComponentProps, ModifierProps {
+interface ChipProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     color?: Colors;
     getRef?: GetRef<HTMLSpanElement>;
@@ -28,5 +28,5 @@ interface ChipProps extends CommonComponentProps, ModifierProps {
  * will match the inherited text color. If desired, the text color can be set
  * explicitly with `textColor` prop, but that's an unlikely use case.
  */
-export declare function Chip({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, color, getRef, id, outline, textColor, title, ...rest }: ChipProps): React.JSX.Element;
+export declare function Chip({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, color, getRef, id, margin, outline, textColor, title, ...rest }: ChipProps): React.JSX.Element;
 export {};

package/lib/cjs/components/chip.js

@@ -29,6 +29,7 @@ exports.Chip = void 0;
 var react_1 = __importDefault(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 var DEFAULT_TEXT_COLOR = 'invert';
 /**
  * With no color specified, the `<Chip />` bases its colors off of the text
@@ -50,14 +51,14 @@ var DEFAULT_TEXT_COLOR = 'invert';
  */
 function Chip(_a) {
     var _b, _c;
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, color = _a.color, getRef = _a.getRef, id = _a.id, outline = _a.outline, textColor = _a.textColor, title = _a.title, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "color", "getRef", "id", "outline", "textColor", "title"]);
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, color = _a.color, getRef = _a.getRef, id = _a.id, margin = _a.margin, outline = _a.outline, textColor = _a.textColor, title = _a.title, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "color", "getRef", "id", "margin", "outline", "textColor", "title"]);
     function getContentColor() {
         if (outline)
             return textColor || null;
         return textColor || DEFAULT_TEXT_COLOR;
     }
     var contentColor = getContentColor();
-    var chipClassname = (0, class_names_1.default)('Chip', _modifierClass, (_b = {
+    var chipClassname = (0, class_names_1.default)('Chip', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass, (_b = {
             'Chip--outlined': outline
         },
         _b["color--".concat(color)] = color && outline,

package/lib/cjs/components/chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAYzD,IAAM,kBAAkB,GAAG,QAAQ,CAAC;AAEpC;;;;;;;;;;;;;;;;;GAiBG;AAEH,SAAgB,IAAI,CAAC,EAaT;;IAZV,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,MAAM,YAAA,EACN,EAAE,QAAA,EACF,OAAO,aAAA,EACP,SAAS,eAAA,EACT,KAAK,WAAA,EACF,IAAI,cAZY,6IAapB,CADQ;IAEP,SAAS,eAAe;QACtB,IAAI,OAAO;YAAE,OAAO,SAAS,IAAI,IAAI,CAAC;QAEtC,OAAO,SAAS,IAAI,kBAAkB,CAAC;IACzC,CAAC;IAED,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,aAAa,GAAG,IAAA,qBAAU,EAAC,MAAM,EAAE,cAAc;YACrD,gBAAgB,EAAE,OAAO;;QACzB,GAAC,iBAAU,KAAK,CAAE,IAAG,KAAK,IAAI,OAAO;QACrC,GAAC,oBAAa,KAAK,CAAE,IAAG,KAAK,IAAI,CAAC,OAAO;YACzC,CAAC;IACH,IAAM,gBAAgB,GAAG,IAAA,qBAAU,EAAC,eAAe;QACjD,GAAC,iBAAU,YAAY,CAAE,IAAG,YAAY;YACxC,CAAC;IAEH,OAAO,CACL,mDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,aAAa,EACxB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK;QAEZ,wCAAM,SAAS,EAAE,gBAAgB,IAAG,QAAQ,CAAQ,CAC/C,CACR,CAAC;AACJ,CAAC;AA7CD,oBA6CC"}
+{"version":3,"file":"chip.js","sourceRoot":"","sources":["../../../src/components/chip.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAU1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAe3D,IAAM,kBAAkB,GAAG,QAAQ,CAAC;AAEpC;;;;;;;;;;;;;;;;;GAiBG;AAEH,SAAgB,IAAI,CAAC,EAcT;;IAbV,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,OAAO,aAAA,EACP,SAAS,eAAA,EACT,KAAK,WAAA,EACF,IAAI,cAbY,uJAcpB,CADQ;IAEP,SAAS,eAAe;QACtB,IAAI,OAAO;YAAE,OAAO,SAAS,IAAI,IAAI,CAAC;QAEtC,OAAO,SAAS,IAAI,kBAAkB,CAAC;IACzC,CAAC;IAED,IAAM,YAAY,GAAG,eAAe,EAAE,CAAC;IAEvC,IAAM,aAAa,GAAG,IAAA,qBAAU,EAC9B,MAAM,EACN,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc;YAEZ,gBAAgB,EAAE,OAAO;;QACzB,GAAC,iBAAU,KAAK,CAAE,IAAG,KAAK,IAAI,OAAO;QACrC,GAAC,oBAAa,KAAK,CAAE,IAAG,KAAK,IAAI,CAAC,OAAO;YAE5C,CAAC;IACF,IAAM,gBAAgB,GAAG,IAAA,qBAAU,EAAC,eAAe;QACjD,GAAC,iBAAU,YAAY,CAAE,IAAG,YAAY;YACxC,CAAC;IAEH,OAAO,CACL,mDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,aAAa,EACxB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK;QAEZ,wCAAM,SAAS,EAAE,gBAAgB,IAAG,QAAQ,CAAQ,CAC/C,CACR,CAAC;AACJ,CAAC;AAnDD,oBAmDC"}

package/lib/cjs/components/collapsible_content.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
-import type { CommonComponentProps, ModifierProps } from '../types';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
 import type { GetRef } from '../utils/refs';
-interface CollapsibleContentProps extends CommonComponentProps, ModifierProps {
+interface CollapsibleContentProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     collapsed: boolean;
     getRef?: GetRef<HTMLDivElement>;
@@ -14,5 +14,5 @@ interface CollapsibleContentProps extends CommonComponentProps, ModifierProps {
  * transition. When fully expanded or collapsed, it removes the `maxHeight` so
  * that any content that might change height will not be cut off.
  */
-export declare function CollapsibleContent({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, collapsed: collapsedProp, getRef, id, ...rest }: CollapsibleContentProps): React.JSX.Element;
+export declare function CollapsibleContent({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, collapsed: collapsedProp, getRef, id, margin, ...rest }: CollapsibleContentProps): React.JSX.Element;
 export {};

package/lib/cjs/components/collapsible_content.js

@@ -54,6 +54,7 @@ var class_names_1 = __importDefault(require("../utils/class_names"));
 var dom_1 = require("../utils/dom");
 var refs_1 = require("../utils/refs");
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 var shared_hooks_1 = require("./shared_hooks");
 var HEIGHT_BUFFER = 10;
 var TRANSITION_DURATION = 200; // should match the duration defined in CSS
@@ -65,7 +66,7 @@ var TRANSITION_DURATION = 200; // should match the duration defined in CSS
  * that any content that might change height will not be cut off.
  */
 function CollapsibleContent(_a) {
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, collapsedProp = _a.collapsed, getRef = _a.getRef, id = _a.id, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "collapsed", "getRef", "id"]);
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, collapsedProp = _a.collapsed, getRef = _a.getRef, id = _a.id, margin = _a.margin, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "collapsed", "getRef", "id", "margin"]);
     var _b = (0, react_1.useState)(collapsedProp), collapsedState = _b[0], setCollapsedState = _b[1];
     var _c = (0, react_1.useState)(false), transitioningState = _c[0], setTransitioningState = _c[1];
     var content = (0, react_1.useRef)();
@@ -99,9 +100,16 @@ function CollapsibleContent(_a) {
         setMaxHeight(collapsedState);
         startTransitionTimeout();
     }, [collapsedState]);
-    var wrapperClassNames = (0, class_names_1.default)('Collapsible__Wrapper', _modifierClass, {
+    var wrapperClassNames = (0, class_names_1.default)('Collapsible__Wrapper', _modifierClass, (0, modifier_classes_1.getMarginClass)(margin), {
         'Collapsible__Wrapper--collapsed': collapsedState,
-        'Collapsible__Wrapper--transitioning': transitioningState
+        'Collapsible__Wrapper--transitioning': transitioningState,
+        /**
+         * This margin utility class prevents the wrapper from adding extra vertical
+         * space when collapsed. The utility class is used instead of a CSS property
+         * so that it take precedence over any default margin applied by a
+         * a parent's `.spacing-v--` utility class.
+         */
+        'margin-b--none': collapsedState || transitioningState
     });
     var contentClassNames = (0, class_names_1.default)('Collapsible__Content', {
         'Collapsible__Content--collapsed': collapsedState

package/lib/cjs/components/collapsible_content.js.map

@@ -1 +1 @@
-{"version":3,"file":"collapsible_content.js","sourceRoot":"","sources":["../../../src/components/collapsible_content.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"collapsible_content.js","sourceRoot":"","sources":["../../../src/components/collapsible_content.tsx"],"names":[],"mappings":"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"}