@dscout/particle 1.0.0-alpha.22 → 1.0.0-alpha.24

package/README.md

@@ -1,30 +1,29 @@
-# particle
+# Particle
 
-A pattern library for building dscout user interfaces with [React].
+A CSS framework and React component library for building dscout user interfaces. Visit the [documentation site] to learn more.
+
+## Usage
 
 Install particle using [yarn] or [npm]:
 
-```shell
+```bash
 $ yarn add @dscout/particle
 $ npm install --save @dscout/particle
 ```
 
-Visit the [demo site] to see example code of the components.
 Everything is a named export on the namespace "@dscout/particle," for example:
 
 ```javascript
-import React from 'react'
-import { Container, ContainerInner } from '@dscout/particle'
+import React from 'react';
+import { Container, Heading } from '@dscout/particle';
 
 export default function Announcement() {
   return (
     <Container>
-      <ContainerInner>
-        <h2>Important!</h2>
-        <p>Make sure to eat your vegetables.</p>
-      </ContainerInner>
+      <Heading level="2">Important!</Heading>
+      <p>Make sure to eat your vegetables.</p>
     </Container>
-  )
+  );
 }
 ```
 
@@ -43,106 +42,76 @@ To import into a plain CSS file:
 The source `scss` file is located in the `styles` directory.
 You can import it into your own `scss` file like so:
 
-```css
-@import '~@dscout/particle/styles/particle.scss';
+```scss
+@import '@dscout/particle/styles/particle.scss';
 ```
 
 ## Developing with Storybook
-Particle uses asdf to manage the node dependencies. To develop locally first
-install asdf with:
 
-```
-$ brew install asdf
-```
+Storybook provides an isolated development environment for Particle components as well as a published static site that serves as a playground and documentation.
 
-Then in order to install nodejs, you must first install its dependencies:
+### Install dependencies
 
-```
-$ brew install coreutils
-$ brew install gpg
+Particle uses asdf to manage the node dependencies. To develop locally first
+install asdf with:
+
+```bash
+brew install asdf
 ```
 
-Import the Node.js release team's OpenPGP keys to main keystring:
+Then install nodejs. If you don't already have nodejs set up on your machine you may first need install its dependencies and OpenPGP keys:
 
-```
-$ bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
+```bash
+brew install coreutils
+brew install gpg
+bash ~/.asdf/plugins/nodejs/bin/import-release-team-keyring
 ```
 
 Install asdf dependencies
 
-```
-$ asdf install
+```bash
+asdf install
 ```
 
-Install dependencies with [yarn]:
+Install NPM dependencies with [yarn]:
 
+```bash
+yarn install
 ```
-$ yarn install
-```
-
-### Storybook
 
-[Storybook] provides a neat approach to developing UI components.
-Start up the development server with `yarn start` and open your
-browser to `http://localhost:6006`.
+### Start Storybook
 
-### Styleguide
+Run Storybook locally:
 
-A PostCSS plugin automatically generates a basic styleguide site from
-comments in the CSS. Run the styleguide locally with `yarn styleguide` and open
-your browser to `http://localhost:9090`.
+```bash
+yarn start
+```
 
 ## Scripts
 
 A variety of scripts are provided for running common tasks.
 
-Lint with ESLint:
-```
-$ yarn lint
-```
-
-Watch the tests with Karma:
-```
-$ yarn test
-```
-
-Lint, then run the test suite:
-```
-$ yarn ci
-```
+Lint with ESLint and run typechecker:
 
-Remove and re-create the `lib` directory:
-```
-$ yarn clean
+```bash
+yarn lint
 ```
 
-Create a build (outputs to the `lib` directory):
-```
-$ yarn build
-```
+Start the Vitest test runner in watch mode:
 
-Minify the CSS build:
-```
-$ yarn nano
+```bash
+yarn test
 ```
 
-Create a release with a minified CSS build:
-```
-$ yarn release
-```
+## Contributing
 
-Generate the documentation website (output to the `docs` directory):
-```
-$ yarn build-docs
-```
+[See the wiki](https://github.com/dscout/particle/wiki/Development-and-QA-workflow) for details on how to contribute to Particle.
 
 ## Releasing a new version
 
-
 Instructions for preparing a new release and submitting it to npm can be found [here](https://github.com/dscout/particle/wiki/Versioning-&-Releases).
 
-[demo site]: https://dscout.github.io/particle/
-[npm]:       https://www.npmjs.com/
-[React]:     https://facebook.github.io/react/
+[documentation site]: https://dscout.github.io/particle/
+[npm]: https://www.npmjs.com/
 [Storybook]: https://getstorybook.io/
-[yarn]:      https://yarnpkg.com/en/docs/install
+[yarn]: https://yarnpkg.com/en/docs/install

package/lib/cjs/components/advanced_options.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 AdvancedOptionsProps extends CommonComponentProps, ModifierProps {
+interface AdvancedOptionsProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     children?: React.ReactNode;
     disabled?: boolean;
     getRef?: GetRef<HTMLDivElement>;
@@ -10,5 +10,5 @@ interface AdvancedOptionsProps extends CommonComponentProps, ModifierProps {
     name?: string;
     title: React.ReactNode;
 }
-export declare function AdvancedOptions({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, disabled, getRef, id, initialCollapsed, name, title, ...rest }: AdvancedOptionsProps): React.JSX.Element;
+export declare function AdvancedOptions({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, children, disabled, getRef, id, initialCollapsed, margin, name, title, ...rest }: AdvancedOptionsProps): React.JSX.Element;
 export {};

package/lib/cjs/components/advanced_options.js

@@ -52,26 +52,27 @@ exports.AdvancedOptions = 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 button_plain_1 = require("./button_plain");
 var collapsible_content_1 = require("./collapsible_content");
 var triangle_inverted_1 = require("../icons/triangle_inverted");
 var flex_1 = require("./flex");
 var modifier_1 = require("./modifier");
-var collapsible_1 = require("./collapsible");
 function AdvancedOptions(_a) {
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? true : _b, name = _a.name, title = _a.title, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "initialCollapsed", "name", "title"]);
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], children = _a.children, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, _b = _a.initialCollapsed, initialCollapsed = _b === void 0 ? true : _b, margin = _a.margin, name = _a.name, title = _a.title, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "children", "disabled", "getRef", "id", "initialCollapsed", "margin", "name", "title"]);
+    var _c = (0, react_1.useState)(initialCollapsed), isCollapsed = _c[0], setIsCollapsed = _c[1];
     var collapsibleContentId = (0, react_1.useId)();
-    return (react_1.default.createElement(collapsible_1.CollapsibleStateProvider, { initialCollapsed: initialCollapsed }, function (_a) {
-        var isCollapsed = _a.isCollapsed, toggleCollapsed = _a.toggleCollapsed;
-        return (react_1.default.createElement("div", { className: (0, class_names_1.default)(_modifierClass), ref: getRef },
-            react_1.default.createElement(modifier_1.Modifier, { margin: { bottom: '0.75' } },
-                react_1.default.createElement(button_plain_1.ButtonPlain, __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": collapsibleContentId, "aria-expanded": !isCollapsed, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, disabled: disabled, id: id, onClick: toggleCollapsed, name: name || (typeof title === 'string' ? title : undefined) }),
-                    react_1.default.createElement(flex_1.Flex, null,
-                        title,
-                        ' ',
-                        react_1.default.createElement(triangle_inverted_1.IconTriangleInverted, { direction: isCollapsed ? 'right' : 'down' })))),
-            react_1.default.createElement(collapsible_content_1.CollapsibleContent, { collapsed: isCollapsed, id: collapsibleContentId }, children)));
-    }));
+    return (react_1.default.createElement("div", { className: (0, class_names_1.default)((0, modifier_classes_1.getMarginClass)(margin), _modifierClass), ref: getRef },
+        react_1.default.createElement(modifier_1.Modifier, { margin: { bottom: 'none' } },
+            react_1.default.createElement(button_plain_1.ButtonPlain, __assign({}, (0, data_attributes_1.default)(rest), { "aria-controls": collapsibleContentId, "aria-expanded": !isCollapsed, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, disabled: disabled, id: id, onClick: function () {
+                    setIsCollapsed(function (prevCollapsed) { return !prevCollapsed; });
+                }, name: name || (typeof title === 'string' ? title : undefined) }),
+                react_1.default.createElement(flex_1.Flex, null,
+                    title,
+                    ' ',
+                    react_1.default.createElement(triangle_inverted_1.IconTriangleInverted, { direction: isCollapsed ? 'right' : 'down' })))),
+        react_1.default.createElement(collapsible_content_1.CollapsibleContent, { collapsed: isCollapsed, id: collapsibleContentId },
+            react_1.default.createElement("div", { className: "margin-t--0.75" }, children))));
 }
 exports.AdvancedOptions = AdvancedOptions;
 //# sourceMappingURL=advanced_options.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"advanced_options.js","sourceRoot":"","sources":["../../../src/components/advanced_options.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAqC;AAKrC,qEAA8C;AAC9C,6EAAyD;AAEzD,+CAA6C;AAC7C,6DAA2D;AAC3D,gEAAkE;AAClE,+BAA8B;AAC9B,uCAAsC;AAEtC,6CAAyD;AAYzD,SAAgB,eAAe,CAAC,EAaT;IAZrB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,wBAAuB,EAAvB,gBAAgB,mBAAG,IAAI,KAAA,EACvB,IAAI,UAAA,EACJ,KAAK,WAAA,EACF,IAAI,cAZuB,oJAa/B,CADQ;IAEP,IAAM,oBAAoB,GAAG,IAAA,aAAK,GAAE,CAAC;IAErC,OAAO,CACL,8BAAC,sCAAwB,IAAC,gBAAgB,EAAE,gBAAgB,IACzD,UAAC,EAAgC;YAA9B,WAAW,iBAAA,EAAE,eAAe,qBAAA;QAAO,OAAA,CACrC,uCAAK,SAAS,EAAE,IAAA,qBAAU,EAAC,cAAc,CAAC,EAAE,GAAG,EAAE,MAAM;YACrD,8BAAC,mBAAQ,IAAC,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;gBAClC,8BAAC,0BAAW,eACN,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,oBAAoB,mBACpB,CAAC,WAAW,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE,eAAe,EACxB,IAAI,EAAE,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;oBAE7D,8BAAC,WAAI;wBACF,KAAK;wBAAE,GAAG;wBACX,8BAAC,wCAAoB,IACnB,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GACzC,CACG,CACK,CACL;YACX,8BAAC,wCAAkB,IAAC,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,oBAAoB,IACjE,QAAQ,CACU,CACjB,CACP;IA3BsC,CA2BtC,CACwB,CAC5B,CAAC;AACJ,CAAC;AAhDD,0CAgDC"}
+{"version":3,"file":"advanced_options.js","sourceRoot":"","sources":["../../../src/components/advanced_options.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAS/C,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAE3D,+CAA6C;AAC7C,6DAA2D;AAC3D,gEAAkE;AAClE,+BAA8B;AAC9B,uCAAsC;AAetC,SAAgB,eAAe,CAAC,EAcT;IAbrB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,wBAAuB,EAAvB,gBAAgB,mBAAG,IAAI,KAAA,EACvB,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,KAAK,WAAA,EACF,IAAI,cAbuB,8JAc/B,CADQ;IAED,IAAA,KAAgC,IAAA,gBAAQ,EAAC,gBAAgB,CAAC,EAAzD,WAAW,QAAA,EAAE,cAAc,QAA8B,CAAC;IACjE,IAAM,oBAAoB,GAAG,IAAA,aAAK,GAAE,CAAC;IAErC,OAAO,CACL,uCACE,SAAS,EAAE,IAAA,qBAAU,EAAC,IAAA,iCAAc,EAAC,MAAM,CAAC,EAAE,cAAc,CAAC,EAC7D,GAAG,EAAE,MAAM;QAEX,8BAAC,mBAAQ,IAAC,MAAM,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE;YAClC,8BAAC,0BAAW,eACN,IAAA,yBAAiB,EAAC,IAAI,CAAC,qBACZ,oBAAoB,mBACpB,CAAC,WAAW,gBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,EAAE,EACN,OAAO,EAAE;oBACP,cAAc,CAAC,UAAC,aAAa,IAAK,OAAA,CAAC,aAAa,EAAd,CAAc,CAAC,CAAC;gBACpD,CAAC,EACD,IAAI,EAAE,IAAI,IAAI,CAAC,OAAO,KAAK,KAAK,QAAQ,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;gBAE7D,8BAAC,WAAI;oBACF,KAAK;oBAAE,GAAG;oBACX,8BAAC,wCAAoB,IAAC,SAAS,EAAE,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,GAAI,CAC9D,CACK,CACL;QACX,8BAAC,wCAAkB,IAAC,SAAS,EAAE,WAAW,EAAE,EAAE,EAAE,oBAAoB;YAClE,uCAAK,SAAS,EAAC,gBAAgB,IAAE,QAAQ,CAAO,CAC7B,CACjB,CACP,CAAC;AACJ,CAAC;AAjDD,0CAiDC"}

package/lib/cjs/components/attribute_input.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 AttributeInputProps extends CommonComponentProps, ModifierProps {
+interface AttributeInputProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     'aria-invalid'?: React.AriaAttributes['aria-invalid'];
     checked?: boolean;
     defaultChecked?: boolean;
@@ -16,5 +16,5 @@ interface AttributeInputProps extends CommonComponentProps, ModifierProps {
     tabIndex?: number;
     value: number | string;
 }
-export declare function AttributeInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, defaultChecked, checked, disabled, getRef, id, label, name, value, onChange, readOnly, required, tabIndex, ...rest }: AttributeInputProps): React.JSX.Element;
+export declare function AttributeInput({ _modifierClass, 'aria-describedby': ariaDescribedby, 'aria-invalid': ariaInvalid, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, defaultChecked, checked, disabled, getRef, id, label, margin, name, value, onChange, readOnly, required, tabIndex, ...rest }: AttributeInputProps): React.JSX.Element;
 export {};

package/lib/cjs/components/attribute_input.js

@@ -29,11 +29,12 @@ exports.AttributeInput = 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 shared_hooks_1 = require("./shared_hooks");
 function AttributeInput(_a) {
-    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], defaultChecked = _a.defaultChecked, checked = _a.checked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, label = _a.label, name = _a.name, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, required = _a.required, tabIndex = _a.tabIndex, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "defaultChecked", "checked", "disabled", "getRef", "id", "label", "name", "value", "onChange", "readOnly", "required", "tabIndex"]);
+    var _modifierClass = _a._modifierClass, ariaDescribedby = _a["aria-describedby"], ariaInvalid = _a["aria-invalid"], ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], defaultChecked = _a.defaultChecked, checked = _a.checked, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, label = _a.label, margin = _a.margin, name = _a.name, value = _a.value, onChange = _a.onChange, readOnly = _a.readOnly, required = _a.required, tabIndex = _a.tabIndex, rest = __rest(_a, ["_modifierClass", 'aria-describedby', 'aria-invalid', 'aria-label', 'aria-labelledby', "defaultChecked", "checked", "disabled", "getRef", "id", "label", "margin", "name", "value", "onChange", "readOnly", "required", "tabIndex"]);
     var attributeId = (0, shared_hooks_1.useFallbackId)(id);
-    var selectorClassName = (0, class_names_1.default)('Attribute', _modifierClass);
+    var selectorClassName = (0, class_names_1.default)('Attribute', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass);
     var labelClassName = (0, class_names_1.default)('Attribute__Label', {
         'Attribute__Label--read-only': readOnly
     });

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

@@ -1 +1 @@
-{"version":3,"file":"attribute_input.js","sourceRoot":"","sources":["../../../src/components/attribute_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAEzD,+CAA+C;AAkB/C,SAAgB,cAAc,CAAC,EAmBT;IAlBpB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,IAAI,cAlBsB,0NAmB9B,CADQ;IAEP,IAAM,WAAW,GAAG,IAAA,4BAAa,EAAC,EAAE,CAAC,CAAC;IAEtC,IAAM,iBAAiB,GAAG,IAAA,qBAAU,EAAC,WAAW,EAAE,cAAc,CAAC,CAAC;IAClE,IAAM,cAAc,GAAG,IAAA,qBAAU,EAAC,kBAAkB,EAAE;QACpD,6BAA6B,EAAE,QAAQ;KACxC,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,iBAAiB;QAE/B,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,gBACE,SAAS,qBACJ,cAAc,kBACjB,WAAW,sBACP,eAAe,EACjC,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACzC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAClB;QACF,yCAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW;YACpD,wCAAM,SAAS,EAAC,2BAA2B,IAAE,KAAK,CAAQ,CACpD,CACJ,CACP,CAAC;AACJ,CAAC;AAvDD,wCAuDC"}
+{"version":3,"file":"attribute_input.js","sourceRoot":"","sources":["../../../src/components/attribute_input.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAE3D,+CAA+C;AAqB/C,SAAgB,cAAc,CAAC,EAoBT;IAnBpB,IAAA,cAAc,oBAAA,EACM,eAAe,yBAAA,EACnB,WAAW,qBAAA,EACb,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACjC,cAAc,oBAAA,EACd,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,KAAK,WAAA,EACL,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,IAAI,cAnBsB,oOAoB9B,CADQ;IAEP,IAAM,WAAW,GAAG,IAAA,4BAAa,EAAC,EAAE,CAAC,CAAC;IAEtC,IAAM,iBAAiB,GAAG,IAAA,qBAAU,EAClC,WAAW,EACX,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,CAAC;IACF,IAAM,cAAc,GAAG,IAAA,qBAAU,EAAC,kBAAkB,EAAE;QACpD,6BAA6B,EAAE,QAAQ;KACxC,CAAC,CAAC;IAEH,OAAO,CACL,uCAAK,SAAS,EAAE,iBAAiB;QAE/B,oDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,IAC3B,EAAE,EAAE,WAAW,EACf,IAAI,EAAE,IAAI,gBACE,SAAS,qBACJ,cAAc,kBACjB,WAAW,sBACP,eAAe,EACjC,GAAG,EAAE,MAAM,EACX,OAAO,EAAE,OAAO,EAChB,cAAc,EAAE,cAAc,EAC9B,SAAS,EAAC,kBAAkB,EAC5B,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EACzC,IAAI,EAAC,OAAO,EACZ,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,IAClB;QACF,yCAAO,SAAS,EAAE,cAAc,EAAE,OAAO,EAAE,WAAW;YACpD,wCAAM,SAAS,EAAC,2BAA2B,IAAE,KAAK,CAAQ,CACpD,CACJ,CACP,CAAC;AACJ,CAAC;AA5DD,wCA4DC"}

package/lib/cjs/components/attribute_selector.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';
 type AttributesMap = {
     [name: string]: string;
 };
-interface AttributeSelectorProps extends CommonComponentProps, ModifierProps {
+interface AttributeSelectorProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     /**
      * A mapping of each inputs `value` to is `<label>` text.
      */
@@ -18,5 +18,5 @@ interface AttributeSelectorProps extends CommonComponentProps, ModifierProps {
     required?: boolean;
     selected?: keyof AttributesMap;
 }
-export declare function AttributeSelector({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, attributes, disabled, getRef, id, name, onClick, readOnly, required, selected, ...rest }: AttributeSelectorProps): React.JSX.Element;
+export declare function AttributeSelector({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, attributes, disabled, getRef, id, margin, name, onClick, readOnly, required, selected, ...rest }: AttributeSelectorProps): React.JSX.Element;
 export {};

package/lib/cjs/components/attribute_selector.js

@@ -29,9 +29,10 @@ exports.AttributeSelector = 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 attribute_input_1 = require("./attribute_input");
 function AttributeSelector(_a) {
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], attributes = _a.attributes, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, name = _a.name, onClick = _a.onClick, readOnly = _a.readOnly, required = _a.required, selected = _a.selected, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "attributes", "disabled", "getRef", "id", "name", "onClick", "readOnly", "required", "selected"]);
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], attributes = _a.attributes, disabled = _a.disabled, getRef = _a.getRef, id = _a.id, margin = _a.margin, name = _a.name, onClick = _a.onClick, readOnly = _a.readOnly, required = _a.required, selected = _a.selected, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "attributes", "disabled", "getRef", "id", "margin", "name", "onClick", "readOnly", "required", "selected"]);
     function handleAttributeSelected(_a) {
         var target = _a.target;
         if (onClick)
@@ -40,7 +41,7 @@ function AttributeSelector(_a) {
     function renderAttribute(attribute) {
         return (react_1.default.createElement(attribute_input_1.AttributeInput, { checked: selected !== undefined ? attribute === selected : undefined, disabled: disabled, id: "".concat(name, "[").concat(attribute, "]"), key: attribute, label: attributes[attribute], name: name, onChange: handleAttributeSelected, readOnly: readOnly, required: required, value: attribute }));
     }
-    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)('Attribute__Selector spacing-h--0.25', _modifierClass), id: id, ref: getRef }), Object.keys(attributes).map(renderAttribute)));
+    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)('Attribute__Selector spacing-h--0.25', (0, modifier_classes_1.getMarginClass)(margin), _modifierClass), id: id, ref: getRef }), Object.keys(attributes).map(renderAttribute)));
 }
 exports.AttributeSelector = AttributeSelector;
 //# sourceMappingURL=attribute_selector.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"attribute_selector.js","sourceRoot":"","sources":["../../../src/components/attribute_selector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAEzD,qDAAmD;AAqBnD,SAAgB,iBAAiB,CAAC,EAeT;IAdvB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,IAAI,cAdyB,wKAejC,CADQ;IAEP,SAAS,uBAAuB,CAAC,EAEK;YADpC,MAAM,YAAA;QAEN,IAAI,OAAO;YAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,eAAe,CAAC,SAA8B;QACrD,OAAO,CACL,8BAAC,gCAAc,IACb,OAAO,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpE,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAG,IAAI,cAAI,SAAS,MAAG,EAC3B,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,EAC5B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,uBAAuB,EACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,GAChB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EACnB,qCAAqC,EACrC,cAAc,CACf,EACD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,KAEV,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,CACzC,CACP,CAAC;AACJ,CAAC;AAvDD,8CAuDC"}
+{"version":3,"file":"attribute_selector.js","sourceRoot":"","sources":["../../../src/components/attribute_selector.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAE3D,qDAAmD;AAwBnD,SAAgB,iBAAiB,CAAC,EAgBT;IAfvB,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,UAAU,gBAAA,EACV,QAAQ,cAAA,EACR,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,OAAO,aAAA,EACP,QAAQ,cAAA,EACR,QAAQ,cAAA,EACR,QAAQ,cAAA,EACL,IAAI,cAfyB,kLAgBjC,CADQ;IAEP,SAAS,uBAAuB,CAAC,EAEK;YADpC,MAAM,YAAA;QAEN,IAAI,OAAO;YAAE,OAAO,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IACrC,CAAC;IAED,SAAS,eAAe,CAAC,SAA8B;QACrD,OAAO,CACL,8BAAC,gCAAc,IACb,OAAO,EAAE,QAAQ,KAAK,SAAS,CAAC,CAAC,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpE,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,UAAG,IAAI,cAAI,SAAS,MAAG,EAC3B,GAAG,EAAE,SAAS,EACd,KAAK,EAAE,UAAU,CAAC,SAAS,CAAC,EAC5B,IAAI,EAAE,IAAI,EACV,QAAQ,EAAE,uBAAuB,EACjC,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,SAAS,GAChB,CACH,CAAC;IACJ,CAAC;IAED,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,IAAA,qBAAU,EACnB,qCAAqC,EACrC,IAAA,iCAAc,EAAC,MAAM,CAAC,EACtB,cAAc,CACf,EACD,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,KAEV,MAAM,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC,GAAG,CAAC,eAAe,CAAC,CACzC,CACP,CAAC;AACJ,CAAC;AAzDD,8CAyDC"}

package/lib/cjs/components/avatar.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 AvatarProps extends CommonComponentProps, ModifierProps {
+interface AvatarProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     active?: boolean;
     avatarUrl: string | null;
     backgroundColor?: Colors;
@@ -13,5 +13,5 @@ interface AvatarProps extends CommonComponentProps, ModifierProps {
     textColor?: Colors;
     title?: string;
 }
-export declare function Avatar({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, active, avatarUrl, backgroundColor, getRef, id, name, outlineColor, size, textColor, title, ...rest }: AvatarProps): React.JSX.Element;
+export declare function Avatar({ _modifierClass, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, active, avatarUrl, backgroundColor, getRef, id, margin, name, outlineColor, size, textColor, title, ...rest }: AvatarProps): React.JSX.Element;
 export {};

package/lib/cjs/components/avatar.js

@@ -53,6 +53,7 @@ var react_1 = __importStar(require("react"));
 var class_names_1 = __importDefault(require("../utils/class_names"));
 var strings_1 = require("../utils/strings");
 var data_attributes_1 = __importDefault(require("../utils/data_attributes"));
+var modifier_classes_1 = require("../utils/modifier_classes");
 var FONT_SIZE_RATIO = 0.375;
 function fontSizeStyle(size) {
     var calculatedSize = typeof size === 'number' ? "".concat(size, "px") : size;
@@ -60,7 +61,7 @@ function fontSizeStyle(size) {
 }
 function Avatar(_a) {
     var _b;
-    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], _c = _a.active, active = _c === void 0 ? false : _c, avatarUrl = _a.avatarUrl, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'dscout' : _d, getRef = _a.getRef, id = _a.id, name = _a.name, _e = _a.outlineColor, outlineColor = _e === void 0 ? 'dscout' : _e, size = _a.size, _f = _a.textColor, textColor = _f === void 0 ? 'invert' : _f, title = _a.title, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "active", "avatarUrl", "backgroundColor", "getRef", "id", "name", "outlineColor", "size", "textColor", "title"]);
+    var _modifierClass = _a._modifierClass, ariaLabel = _a["aria-label"], ariaLabelledby = _a["aria-labelledby"], ariaDescribedby = _a["aria-describedby"], _c = _a.active, active = _c === void 0 ? false : _c, avatarUrl = _a.avatarUrl, _d = _a.backgroundColor, backgroundColor = _d === void 0 ? 'dscout' : _d, getRef = _a.getRef, id = _a.id, margin = _a.margin, name = _a.name, _e = _a.outlineColor, outlineColor = _e === void 0 ? 'dscout' : _e, size = _a.size, _f = _a.textColor, textColor = _f === void 0 ? 'invert' : _f, title = _a.title, rest = __rest(_a, ["_modifierClass", 'aria-label', 'aria-labelledby', 'aria-describedby', "active", "avatarUrl", "backgroundColor", "getRef", "id", "margin", "name", "outlineColor", "size", "textColor", "title"]);
     var _g = (0, react_1.useState)(false), loaded = _g[0], setLoaded = _g[1];
     (0, react_1.useEffect)(function () {
         setLoaded(false);
@@ -73,7 +74,7 @@ function Avatar(_a) {
         };
         img.src = avatarUrl;
     }, [avatarUrl]);
-    var className = (0, class_names_1.default)('Avatar', _modifierClass, (_b = {
+    var className = (0, class_names_1.default)('Avatar', _modifierClass, (0, modifier_classes_1.getMarginClass)(margin), (_b = {
             'Avatar--loaded': loaded,
             'Avatar--active': active
         },

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

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmD;AAKnD,qEAA8C;AAC9C,4CAA+C;AAC/C,6EAAyD;AAezD,IAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,SAAS,aAAa,CAAC,IAAqB;IAC1C,IAAM,cAAc,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,IAAI,OAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAErE,OAAO,EAAE,QAAQ,EAAE,eAAQ,cAAc,gBAAM,eAAe,MAAG,EAAE,CAAC;AACtE,CAAC;AAED,SAAgB,MAAM,CAAC,EAgBT;;IAfZ,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,SAAS,eAAA,EACT,uBAA0B,EAA1B,eAAe,mBAAG,QAAQ,KAAA,EAC1B,MAAM,YAAA,EACN,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,oBAAuB,EAAvB,YAAY,mBAAG,QAAQ,KAAA,EACvB,IAAI,UAAA,EACJ,iBAAoB,EAApB,SAAS,mBAAG,QAAQ,KAAA,EACpB,KAAK,WAAA,EACF,IAAI,cAfc,uLAgBtB,CADQ;IAED,IAAA,KAAsB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAA,iBAAS,EAAC;QACR,SAAS,CAAC,KAAK,CAAC,CAAC;QAEjB,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,IAAI,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;QAEtB,GAAG,CAAC,MAAM,GAAG;YACX,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,GAAG,GAAG,IAAI,CAAC;QACb,CAAC,CAAC;QACF,GAAG,CAAC,GAAG,GAAG,SAAS,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,SAAS,GAAG,IAAA,qBAAU,EAAC,QAAQ,EAAE,cAAc;YACnD,gBAAgB,EAAE,MAAM;YACxB,gBAAgB,EAAE,MAAM;;QACxB,GAAC,oBAAa,eAAe,CAAE,IAAG,eAAe;QACjD,GAAC,iBAAU,SAAS,CAAE,IAAG,SAAS;YAClC,CAAC;IACH,IAAM,KAAK,GAAG;QACZ,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,eAAQ,SAAS,OAAI,CAAC,CAAC,CAAC,SAAS;QAC3D,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,uBAAgB,YAAY,MAAG;QAC7C,KAAK,EAAE,IAAI;KACZ,CAAC;IAEF,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,IAAI,IAAI,KAEnB,CAAC,MAAM,IAAI,CACV,wCACE,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAEvC,IAAA,qBAAW,EAAC,IAAI,CAAC,CACb,CACR,CACG,CACP,CAAC;AACJ,CAAC;AApED,wBAoEC"}
+{"version":3,"file":"avatar.js","sourceRoot":"","sources":["../../../src/components/avatar.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAAmD;AAUnD,qEAA8C;AAC9C,4CAA+C;AAC/C,6EAAyD;AACzD,8DAA2D;AAkB3D,IAAM,eAAe,GAAG,KAAK,CAAC;AAE9B,SAAS,aAAa,CAAC,IAAqB;IAC1C,IAAM,cAAc,GAAG,OAAO,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,UAAG,IAAI,OAAI,CAAC,CAAC,CAAC,IAAI,CAAC;IAErE,OAAO,EAAE,QAAQ,EAAE,eAAQ,cAAc,gBAAM,eAAe,MAAG,EAAE,CAAC;AACtE,CAAC;AAED,SAAgB,MAAM,CAAC,EAiBT;;IAhBZ,IAAA,cAAc,oBAAA,EACA,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnC,cAAc,EAAd,MAAM,mBAAG,KAAK,KAAA,EACd,SAAS,eAAA,EACT,uBAA0B,EAA1B,eAAe,mBAAG,QAAQ,KAAA,EAC1B,MAAM,YAAA,EACN,EAAE,QAAA,EACF,MAAM,YAAA,EACN,IAAI,UAAA,EACJ,oBAAuB,EAAvB,YAAY,mBAAG,QAAQ,KAAA,EACvB,IAAI,UAAA,EACJ,iBAAoB,EAApB,SAAS,mBAAG,QAAQ,KAAA,EACpB,KAAK,WAAA,EACF,IAAI,cAhBc,iMAiBtB,CADQ;IAED,IAAA,KAAsB,IAAA,gBAAQ,EAAC,KAAK,CAAC,EAApC,MAAM,QAAA,EAAE,SAAS,QAAmB,CAAC;IAE5C,IAAA,iBAAS,EAAC;QACR,SAAS,CAAC,KAAK,CAAC,CAAC;QAEjB,IAAI,CAAC,SAAS;YAAE,OAAO;QAEvB,IAAI,GAAG,GAAG,IAAI,KAAK,EAAE,CAAC;QAEtB,GAAG,CAAC,MAAM,GAAG;YACX,SAAS,CAAC,IAAI,CAAC,CAAC;YAChB,GAAG,GAAG,IAAI,CAAC;QACb,CAAC,CAAC;QACF,GAAG,CAAC,GAAG,GAAG,SAAS,CAAC;IACtB,CAAC,EAAE,CAAC,SAAS,CAAC,CAAC,CAAC;IAEhB,IAAM,SAAS,GAAG,IAAA,qBAAU,EAC1B,QAAQ,EACR,cAAc,EACd,IAAA,iCAAc,EAAC,MAAM,CAAC;YAEpB,gBAAgB,EAAE,MAAM;YACxB,gBAAgB,EAAE,MAAM;;QACxB,GAAC,oBAAa,eAAe,CAAE,IAAG,eAAe;QACjD,GAAC,iBAAU,SAAS,CAAE,IAAG,SAAS;YAErC,CAAC;IACF,IAAM,KAAK,GAAG;QACZ,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC,eAAQ,SAAS,OAAI,CAAC,CAAC,CAAC,SAAS;QAC3D,MAAM,EAAE,IAAI;QACZ,YAAY,EAAE,uBAAgB,YAAY,MAAG;QAC7C,KAAK,EAAE,IAAI;KACZ,CAAC;IAEF,OAAO,CACL,kDACM,IAAA,yBAAiB,EAAC,IAAI,CAAC,kBACf,SAAS,qBACJ,cAAc,sBACb,eAAe,EACjC,SAAS,EAAE,SAAS,EACpB,EAAE,EAAE,EAAE,EACN,GAAG,EAAE,MAAM,EACX,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,IAAI,IAAI,KAEnB,CAAC,MAAM,IAAI,CACV,wCACE,SAAS,EAAC,kBAAkB,EAC5B,KAAK,EAAE,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,IAAI,IAEvC,IAAA,qBAAW,EAAC,IAAI,CAAC,CACb,CACR,CACG,CACP,CAAC;AACJ,CAAC;AA1ED,wBA0EC"}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import type { CommonComponentProps, ModifierProps } from '../types';
+import type { CommonComponentProps, MarginModifierProp, ModifierClassProp } from '../types';
 import type { GetRef } from '../utils/refs';
 declare const COLORS: readonly ["alert", "close", "coachmark", "dscout", "archive", "none", "success", "note", "screener", "live", "diary", "test", "invert", "black", "white"];
 declare const SIZES: readonly ["tiny", "small", "big"];
@@ -9,7 +9,7 @@ type Colors = (typeof COLORS)[number];
 type Sizes = (typeof SIZES)[number];
 type Widths = (typeof WIDTHS)[number];
 type Variants = (typeof VARIANTS)[number];
-interface ButtonProps extends CommonComponentProps, ModifierProps {
+interface ButtonProps extends CommonComponentProps, MarginModifierProp, ModifierClassProp {
     'aria-controls'?: string;
     'aria-expanded'?: React.AriaAttributes['aria-expanded'];
     'aria-pressed'?: boolean;
@@ -32,5 +32,5 @@ interface ButtonProps extends CommonComponentProps, ModifierProps {
     width?: Widths;
     variant?: Variants;
 }
-export declare function Button({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, children, color, disabled, getRef, id, linkComponent, linkProps, name, onClick, onMouseUp, onMouseDown, refProp, size, tabIndex, title, type, width, variant, ...rest }: ButtonProps): React.JSX.Element;
+export declare function Button({ _modifierClass, 'aria-controls': ariaControls, 'aria-expanded': ariaExpanded, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-describedby': ariaDescribedby, 'aria-pressed': ariaPressed, children, color, disabled, getRef, id, linkComponent, linkProps, margin, name, onClick, onMouseUp, onMouseDown, refProp, size, tabIndex, title, type, width, variant, ...rest }: ButtonProps): React.JSX.Element;
 export {};

package/lib/cjs/components/button.js

@@ -29,6 +29,7 @@ exports.Button = 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 common_button_1 = require("./common_button");
 var COLORS = [
     'alert',
@@ -66,8 +67,8 @@ function supportedClassFor(type, value) {
     }
 }
 function Button(_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"], children = _a.children, color = _a.color, 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, size = _a.size, tabIndex = _a.tabIndex, title = _a.title, type = _a.type, width = _a.width, variant = _a.variant, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-pressed', "children", "color", "disabled", "getRef", "id", "linkComponent", "linkProps", "name", "onClick", "onMouseUp", "onMouseDown", "refProp", "size", "tabIndex", "title", "type", "width", "variant"]);
-    var className = (0, class_names_1.default)('Button', supportedClassFor('size', size), supportedClassFor('width', width), supportedClassFor('variant', variant), supportedClassFor('color', color), _modifierClass);
+    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"], children = _a.children, color = _a.color, 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, size = _a.size, tabIndex = _a.tabIndex, title = _a.title, type = _a.type, width = _a.width, variant = _a.variant, rest = __rest(_a, ["_modifierClass", 'aria-controls', 'aria-expanded', 'aria-label', 'aria-labelledby', 'aria-describedby', 'aria-pressed', "children", "color", "disabled", "getRef", "id", "linkComponent", "linkProps", "margin", "name", "onClick", "onMouseUp", "onMouseDown", "refProp", "size", "tabIndex", "title", "type", "width", "variant"]);
+    var className = (0, class_names_1.default)('Button', supportedClassFor('size', size), supportedClassFor('width', width), supportedClassFor('variant', variant), supportedClassFor('color', color), _modifierClass, (0, modifier_classes_1.getMarginClass)(margin));
     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, tabIndex: tabIndex, title: title, type: type }), children));
 }
 exports.Button = Button;

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

@@ -1 +1 @@
-{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAK1B,qEAA8C;AAC9C,6EAAyD;AAEzD,iDAA+C;AAE/C,IAAM,MAAM,GAAG;IACb,OAAO;IACP,OAAO;IACP,WAAW;IACX,QAAQ;IACR,SAAS;IACT,MAAM;IACN,SAAS;IACT,MAAM;IACN,UAAU;IACV,MAAM;IACN,OAAO;IACP,MAAM;IACN,QAAQ;IACR,OAAO;IACP,OAAO;CACC,CAAC;AAEX,IAAM,KAAK,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAU,CAAC;AAEhD,IAAM,MAAM,GAAG,CAAC,WAAW,EAAE,OAAO,CAAU,CAAC;AAE/C,IAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAC;AAE/C,IAAM,KAAK,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,QAAQ;CAClB,CAAC;AA+BF,IAAM,SAAS,GAA2B;IACxC,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,SAAS,iBAAiB,CAAC,IAAwB,EAAE,KAAa;IAChE,IAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC;IAErE,IAAK,KAAK,CAAC,IAAI,CAA2B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QAC1D,OAAO,UAAG,WAAW,SAAG,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,CAAE,CAAC;KACrD;AACH,CAAC;AAED,SAAgB,MAAM,CAAC,EA2BT;IA1BZ,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnB,WAAW,qBAAA,EAC3B,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,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,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACJ,IAAI,cA1Bc,2TA2BtB,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAC1B,QAAQ,EACR,iBAAiB,CAAC,MAAM,EAAE,IAAI,CAAC,EAC/B,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EACjC,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,EACrC,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EACjC,cAAc,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,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,KAET,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC;AAhED,wBAgEC"}
+{"version":3,"file":"button.js","sourceRoot":"","sources":["../../../src/components/button.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAS1B,qEAA8C;AAC9C,6EAAyD;AACzD,8DAA2D;AAE3D,iDAA+C;AAE/C,IAAM,MAAM,GAAG;IACb,OAAO;IACP,OAAO;IACP,WAAW;IACX,QAAQ;IACR,SAAS;IACT,MAAM;IACN,SAAS;IACT,MAAM;IACN,UAAU;IACV,MAAM;IACN,OAAO;IACP,MAAM;IACN,QAAQ;IACR,OAAO;IACP,OAAO;CACC,CAAC;AAEX,IAAM,KAAK,GAAG,CAAC,MAAM,EAAE,OAAO,EAAE,KAAK,CAAU,CAAC;AAEhD,IAAM,MAAM,GAAG,CAAC,WAAW,EAAE,OAAO,CAAU,CAAC;AAE/C,IAAM,QAAQ,GAAG,CAAC,OAAO,EAAE,SAAS,CAAU,CAAC;AAE/C,IAAM,KAAK,GAAG;IACZ,KAAK,EAAE,MAAM;IACb,IAAI,EAAE,KAAK;IACX,KAAK,EAAE,MAAM;IACb,OAAO,EAAE,QAAQ;CAClB,CAAC;AAkCF,IAAM,SAAS,GAA2B;IACxC,IAAI,EAAE,OAAO;CACd,CAAC;AAEF,SAAS,iBAAiB,CAAC,IAAwB,EAAE,KAAa;IAChE,IAAM,WAAW,GAAG,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,CAAC,UAAU,CAAC;IAErE,IAAK,KAAK,CAAC,IAAI,CAA2B,CAAC,QAAQ,CAAC,KAAK,CAAC,EAAE;QAC1D,OAAO,UAAG,WAAW,SAAG,SAAS,CAAC,KAAK,CAAC,IAAI,KAAK,CAAE,CAAC;KACrD;AACH,CAAC;AAED,SAAgB,MAAM,CAAC,EA4BT;IA3BZ,IAAA,cAAc,oBAAA,EACG,YAAY,sBAAA,EACZ,YAAY,sBAAA,EACf,SAAS,mBAAA,EACJ,cAAc,wBAAA,EACb,eAAe,yBAAA,EACnB,WAAW,qBAAA,EAC3B,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,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,IAAI,UAAA,EACJ,QAAQ,cAAA,EACR,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,OAAO,aAAA,EACJ,IAAI,cA3Bc,qUA4BtB,CADQ;IAEP,IAAM,SAAS,GAAG,IAAA,qBAAU,EAC1B,QAAQ,EACR,iBAAiB,CAAC,MAAM,EAAE,IAAI,CAAC,EAC/B,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EACjC,iBAAiB,CAAC,SAAS,EAAE,OAAO,CAAC,EACrC,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,EACjC,cAAc,EACd,IAAA,iCAAc,EAAC,MAAM,CAAC,CACvB,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,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,KAET,QAAQ,CACI,CAChB,CAAC;AACJ,CAAC;AAlED,wBAkEC"}

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

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

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