@spaced-out/ui-design-system 0.1.28 → 0.1.30

package/.storybook/main.js

@@ -108,7 +108,7 @@ module.exports = {
     config.resolve.extensions.push('.js', '.jsx');
     return config;
   },
-  staticDirs: ['public'],
+  staticDirs: ['public', '../design-tokens'],
   framework: {
     name: '@storybook/react-webpack5',
     options: {},

package/.storybook/preview-head.html

@@ -113,7 +113,7 @@
     font-family: 'Centra No 2';
   }
 
-  .sbdocs *:not(i) {
+  .sbdocs *:not(i):not(pre span) {
     font-family: 'Centra No 2' !important;
   }
 
@@ -149,6 +149,11 @@
     background-color: #f1f1f5 !important;
     box-shadow: none !important;
     border-color: #d3d2e0 !important;
+    font-family: 'Monaco' !important;
+  }
+
+  pre span {
+    font-family: 'Monaco' !important;
   }
 
   a.sbdocs {

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.30](https://github.com/spaced-out/ui-design-system/compare/v0.1.29...v0.1.30) (2023-06-06)
+
+
+### Features
+
+* 🛸 download tokens textarea placeholder fixes 🛸 ([763829a](https://github.com/spaced-out/ui-design-system/commit/763829a08a3355613b50133288bb89b98745e88b))
+* hooks and utils stories ([74e22fa](https://github.com/spaced-out/ui-design-system/commit/74e22fa1c315eb7d415501e8da39aa93ef968167))
+
+
+### Bug Fixes
+
+* added import docs for utils and hooks ([2f8d3a8](https://github.com/spaced-out/ui-design-system/commit/2f8d3a8e0fe99d37c9f6f00a681affaaf9938efa))
+* stories fixes ([62fa978](https://github.com/spaced-out/ui-design-system/commit/62fa97803eb8250b0d1b227b68cf68f50a1ebc19))
+* typo fixes ([29c50ad](https://github.com/spaced-out/ui-design-system/commit/29c50ad526996f4d9f95e575ee5d239ad68e6c5c))
+
+### [0.1.29](https://github.com/spaced-out/ui-design-system/compare/v0.1.28...v0.1.29) (2023-06-01)
+
+
+### Bug Fixes
+
+* add classnames support for text in badge ([#119](https://github.com/spaced-out/ui-design-system/issues/119)) ([f044fb6](https://github.com/spaced-out/ui-design-system/commit/f044fb682079cb62d5fa82fea0d4884d5512995c))
+* changed folder structure for hooks and utils ([6bc1693](https://github.com/spaced-out/ui-design-system/commit/6bc1693cbe338ee7ad3f0ffe82e5caaf7ff2ef28))
+* changed position of hooks ([a3f14a4](https://github.com/spaced-out/ui-design-system/commit/a3f14a478999a4124eb08a7052031b9fa2891363))
+
 ### [0.1.28](https://github.com/spaced-out/ui-design-system/compare/v0.1.27...v0.1.28) (2023-05-26)
 
 

package/design-tokens/index.js

@@ -1,5 +1,7 @@
-const { readdirSync, statSync } = require("fs");
-const { join } = require("path");
+const {readdirSync, statSync} = require('fs');
+const {join} = require('path');
+
+
 const dirs = (p) =>
   readdirSync(p).filter((f) => statSync(join(p, f)).isDirectory());
-module.exports = dirs(__dirname);
+module.exports = dirs(__dirname);

package/lib/components/Badge/Badge.js

@@ -37,6 +37,8 @@ const Badge = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       backgroundColor: BADGE_COLOR[fill]
     },
     ref: ref
-  }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, null, text));
+  }, /*#__PURE__*/React.createElement(_Text.ButtonTextSmall, {
+    className: classNames?.text
+  }, text));
 });
 exports.Badge = Badge;

package/lib/components/Badge/Badge.js.flow

@@ -16,7 +16,7 @@ import {ButtonTextSmall} from '../Text/Text';
 import css from './Badge.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+type ClassNames = $ReadOnly<{wrapper?: string, text?: string}>;
 
 export const BADGE_COLOR = Object.freeze({
   gray: colorGrayLightest,
@@ -52,7 +52,7 @@ export const Badge: React$AbstractComponent<BadgeProps, HTMLDivElement> =
         }}
         ref={ref}
       >
-        <ButtonTextSmall>{text}</ButtonTextSmall>
+        <ButtonTextSmall className={classNames?.text}>{text}</ButtonTextSmall>
       </div>
     ),
   );

package/lib/components/Pagination/Pagination.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Pagination = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _usePagination = _interopRequireDefault(require("../../hooks/usePagination"));
+var _usePagination = require("../../hooks/usePagination");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _helpers = require("../../utils/helpers");
 var _Dropdown = require("../Dropdown");
@@ -30,7 +30,7 @@ const Pagination = /*#__PURE__*/React.forwardRef((props, ref) => {
   } = props;
   const {
     items
-  } = (0, _usePagination.default)({
+  } = (0, _usePagination.usePagination)({
     style,
     showFirstButton,
     showLastButton,

package/lib/components/Pagination/Pagination.js.flow

@@ -2,7 +2,7 @@
 
 import * as React from 'react';
 
-import usePagination from '../../hooks/usePagination';
+import {usePagination} from '../../hooks/usePagination';
 import classify from '../../utils/classify';
 import {range} from '../../utils/helpers';
 import {Dropdown} from '../Dropdown';

package/lib/components/Textarea/Textarea.module.css

@@ -94,6 +94,10 @@
   background-color: colorFillDisabled;
 }
 
+textarea::placeholder {
+  color: colorTextSecondary;
+}
+
 .inputDisabled textarea::placeholder {
   color: inherit;
 }

package/lib/hooks/useCopyToClipboard/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useCopyToClipboard = require("./useCopyToClipboard");
+Object.keys(_useCopyToClipboard).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useCopyToClipboard[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useCopyToClipboard[key];
+    }
+  });
+});

package/lib/hooks/useCopyToClipboard/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useCopyToClipboard';

package/lib/hooks/useInputState/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useInputState = require("./useInputState");
+Object.keys(_useInputState).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useInputState[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useInputState[key];
+    }
+  });
+});

package/lib/hooks/useInputState/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useInputState';

package/lib/hooks/useLockedBody/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useLockedBody = require("./useLockedBody");
+Object.keys(_useLockedBody).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useLockedBody[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useLockedBody[key];
+    }
+  });
+});

package/lib/hooks/useLockedBody/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useLockedBody';

package/lib/hooks/usePagination/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _usePagination = require("./usePagination");
+Object.keys(_usePagination).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _usePagination[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _usePagination[key];
+    }
+  });
+});

package/lib/hooks/usePagination/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './usePagination';

package/lib/hooks/{usePagination.js → usePagination/usePagination.js}

@@ -3,10 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = usePagination;
-var _helpers = require("../utils/helpers");
+exports.usePagination = void 0;
+var _helpers = require("../../utils/helpers");
 
-function usePagination(props) {
+const usePagination = props => {
   const {
     boundaryCount = 1,
     totalPages = 1,
@@ -99,4 +99,5 @@ function usePagination(props) {
   return {
     items
   };
-}
+};
+exports.usePagination = usePagination;

package/lib/hooks/{usePagination.js.flow → usePagination/usePagination.js.flow}

@@ -3,13 +3,15 @@
 import type {
   PaginationBaseProps,
   PaginationItemProps,
-} from '../components/Pagination';
-import {range} from '../utils/helpers';
+} from '../../components/Pagination';
+import {range} from '../../utils/helpers';
 
 
-export default function usePagination(props: PaginationBaseProps): {
+export const usePagination = (
+  props: PaginationBaseProps,
+): {
   items: ?(PaginationItemProps[]),
-} {
+} => {
   const {
     boundaryCount = 1,
     totalPages = 1,
@@ -150,4 +152,4 @@ export default function usePagination(props: PaginationBaseProps): {
   return {
     items,
   };
-}
+};

package/lib/hooks/useToastPortal/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useToastPortal = require("./useToastPortal");
+Object.keys(_useToastPortal).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useToastPortal[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useToastPortal[key];
+    }
+  });
+});

package/lib/hooks/useToastPortal/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useToastPortal';

package/lib/hooks/{useToastPortal.js → useToastPortal/useToastPortal.js}

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useToastPortal = void 0;
 var _react = require("react");
-var _elevation = require("../styles/variables/_elevation");
-var _space = require("../styles/variables/_space");
+var _elevation = require("../../styles/variables/_elevation");
+var _space = require("../../styles/variables/_space");
 
 const useToastPortal = _ref => {
   let {

package/lib/hooks/{useToastPortal.js.flow → useToastPortal/useToastPortal.js.flow}

@@ -1,8 +1,8 @@
 // @flow strict
 import {useEffect, useState} from 'react';
 
-import {elevationToast} from '../styles/variables/_elevation';
-import {spaceMedium} from '../styles/variables/_space';
+import {elevationToast} from '../../styles/variables/_elevation';
+import {spaceMedium} from '../../styles/variables/_space';
 
 
 type UseToastPortal = {

package/lib/hooks/useToggle/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useToggle = require("./useToggle");
+Object.keys(_useToggle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useToggle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useToggle[key];
+    }
+  });
+});

package/lib/hooks/useToggle/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useToggle';

package/lib/hooks/useWindowSize/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useWindowSize = require("./useWindowSize");
+Object.keys(_useWindowSize).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useWindowSize[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useWindowSize[key];
+    }
+  });
+});

package/lib/hooks/useWindowSize/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './useWindowSize';

package/lib/utils/{click-away.js → click-away/click-away.js}

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.ClickAway = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _invariant = _interopRequireDefault(require("invariant"));
-var _dom = require("./dom");
+var _dom = require("../dom");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/{click-away.js.flow → click-away/click-away.js.flow}

@@ -3,7 +3,7 @@
 import * as React from 'react';
 import invariant from 'invariant';
 
-import {pageHeight} from './dom';
+import {pageHeight} from '../dom';
 
 
 export type ChildProps = {

package/lib/utils/click-away/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _clickAway = require("./click-away");
+Object.keys(_clickAway).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _clickAway[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _clickAway[key];
+    }
+  });
+});

package/lib/utils/click-away/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './click-away';

package/lib/utils/dom/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _dom = require("./dom");
+Object.keys(_dom).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _dom[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _dom[key];
+    }
+  });
+});

package/lib/utils/dom/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './dom';

package/lib/utils/helpers/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _helpers = require("./helpers");
+Object.keys(_helpers).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _helpers[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _helpers[key];
+    }
+  });
+});

package/lib/utils/helpers/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './helpers';

package/lib/utils/makeClassNameComponent/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _makeClassNameComponent = require("./makeClassNameComponent");
+Object.keys(_makeClassNameComponent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _makeClassNameComponent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _makeClassNameComponent[key];
+    }
+  });
+});

package/lib/utils/makeClassNameComponent/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './makeClassNameComponent';

package/lib/utils/{makeClassNameComponent.js → makeClassNameComponent/makeClassNameComponent.js}

@@ -7,7 +7,7 @@ exports.makeClassNameComponent = makeClassNameComponent;
 exports.makeClassNameComponentCustom = makeClassNameComponentCustom;
 exports.nameHoc = nameHoc;
 var React = _interopRequireWildcard(require("react"));
-var _classify = _interopRequireDefault(require("./classify"));
+var _classify = _interopRequireDefault(require("../classify"));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

package/lib/utils/{makeClassNameComponent.js.flow → makeClassNameComponent/makeClassNameComponent.js.flow}

@@ -1,8 +1,7 @@
 // @flow strict
-
 import * as React from 'react';
 
-import classify from './classify';
+import classify from '../classify';
 
 
 export function nameHoc<C, T: React.ComponentType<C>, C2>(

package/lib/utils/menu/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _menu = require("./menu");
+Object.keys(_menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _menu[key];
+    }
+  });
+});

package/lib/utils/menu/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './menu';

package/lib/utils/{menu.js → menu/menu.js}

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getTextLabelFromSelectedKeys = exports.getSelectedKeysFromSelectedOption = exports.getOptionsFromKeys = exports.getOptionFromKey = exports.getFilteredOptionsResultText = exports.getFilteredOptionsFromSearchText = exports.getFilteredGroupTitleOptionsResultText = exports.getFilteredGroupTitleOptionsFromSearchText = exports.getFilteredComposeOptionsResultText = exports.getFilteredComposeOptionsFromSearchText = exports.getButtonLabelFromSelectedKeys = void 0;
 var React = _interopRequireWildcard(require("react"));
-var _string = require("./string");
+var _string = require("../string");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 

package/lib/utils/{menu.js.flow → menu/menu.js.flow}

@@ -1,9 +1,8 @@
 // @flow strict
 import * as React from 'react';
 
-import type {MenuGroupTitleOption, MenuOption} from '../components/Menu';
-
-import {formatWord} from './string';
+import type {MenuGroupTitleOption, MenuOption} from '../../components/Menu';
+import {formatWord} from '../string';
 
 
 export const getSelectedKeysFromSelectedOption = (

package/lib/utils/merge-refs/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _mergeRefs = require("./merge-refs");
+Object.keys(_mergeRefs).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _mergeRefs[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _mergeRefs[key];
+    }
+  });
+});

package/lib/utils/merge-refs/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './merge-refs';

package/lib/utils/string/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _string = require("./string");
+Object.keys(_string).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _string[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _string[key];
+    }
+  });
+});

package/lib/utils/string/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './string';

package/lib/utils/tokens/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _tokens = require("./tokens");
+Object.keys(_tokens).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _tokens[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _tokens[key];
+    }
+  });
+});

package/lib/utils/tokens/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './tokens';

package/lib/utils/{tokens.js → tokens/tokens.js}

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.getSortedTokenNames = exports.getRandomDataVariation = exports.filterTableDataBySearchText = exports.dataVariations = void 0;
+exports.handleDownload = exports.getSortedTokenNames = exports.getRandomDataVariation = exports.filterTableDataBySearchText = exports.dataVariations = void 0;
 
 const dataVariations = [{
   title: 'The Great HTML Escape 🎩🌐',
@@ -151,4 +151,18 @@ const getRandomDataVariation = () => {
   const randomIndex = Math.floor(Math.random() * dataVariations.length);
   return dataVariations[randomIndex];
 };
-exports.getRandomDataVariation = getRandomDataVariation;
+exports.getRandomDataVariation = getRandomDataVariation;
+const handleDownload = (path, fileName) => {
+  const filePath = `../../../${path}`;
+  fetch(filePath).then(response => response.blob()).then(blob => {
+    const url = URL.createObjectURL(blob);
+    const link = document.createElement('a');
+    link.href = url;
+    link.download = fileName;
+    link.click();
+    URL.revokeObjectURL(url);
+  }).catch(error => {
+    console.error('Error downloading the JSON file:', error);
+  });
+};
+exports.handleDownload = handleDownload;

package/lib/utils/{tokens.js.flow → tokens/tokens.js.flow}

@@ -226,3 +226,21 @@ export const getRandomDataVariation = (): DataVariation => {
   const randomIndex: number = Math.floor(Math.random() * dataVariations.length);
   return dataVariations[randomIndex];
 };
+
+export const handleDownload = (path: string, fileName: string) => {
+  const filePath = `../../../${path}`;
+
+  fetch(filePath)
+    .then((response) => response.blob())
+    .then((blob) => {
+      const url = URL.createObjectURL(blob);
+      const link = document.createElement('a');
+      link.href = url;
+      link.download = fileName;
+      link.click();
+      URL.revokeObjectURL(url);
+    })
+    .catch((error) => {
+      console.error('Error downloading the JSON file:', error);
+    });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.1.28",
+  "version": "0.1.30",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {