@spaced-out/ui-design-system 0.4.12 → 0.4.13-beta.1

package/lib/hooks/useMountTransition/useMountTransition.stories.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Text = require("../../components/Text");
+var _ = _interopRequireDefault(require("./"));
+var _useMountTransitionStoriesModule = _interopRequireDefault(require("./useMountTransition.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useMountTransition',
+  component: _.default,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useMountTransition } from "@spaced-out/ui-design-system/lib/hooks/useMountTransition";
+\`\`\`
+The \`useMountTransition\` hook is a custom hook that tracks the mount and unmount transitions of a component.
+
+### Props Accepted
+- \`isMounted\`: A boolean value indicating whether the component is mounted or not.
+- \`unmountDelay\`: The delay in milliseconds before transitioning from mounted to unmounted state.
+
+### Return Value
+- \`isTransitioning\`: A boolean value indicating whether the component is currently transitioning.
+
+### Usage
+\`\`\`jsx
+import useMountTransition from './useMountTransition';
+
+const MyComponent = () => {
+  const isMounted = ...; // Some value indicating whether the component is mounted or not
+  const unmountDelay = ...; // Delay before transitioning from mounted to unmounted state
+
+  const isTransitioning = useMountTransition(isMounted, unmountDelay);
+
+  useEffect(() => {
+    // Perform any additional actions during transition
+    if (isTransitioning) {
+      // ...
+    }
+  }, [isTransitioning]);
+
+  return (
+    <div className={\`${_useMountTransitionStoriesModule.default.container} \${isTransitioning ? css.transitioning : ''}\`}>
+      <BodyLarge>Component content</BodyLarge>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+        `
+      }
+    }
+  }
+};
+const Example = () => /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, null, "Usage documented above"));
+exports.Example = Example;

package/lib/hooks/usePagination/index.d.ts

@@ -0,0 +1,2 @@
+export * from './usePagination';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/usePagination/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePagination/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib/hooks/usePagination/usePagination.d.ts

@@ -0,0 +1,5 @@
+import type { PaginationBaseProps, PaginationItemProps } from '../../components/Pagination';
+export declare const usePagination: (props: PaginationBaseProps) => {
+    items: PaginationItemProps[] | null | undefined;
+};
+//# sourceMappingURL=usePagination.d.ts.map

package/lib/hooks/usePagination/usePagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePagination/usePagination.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAC,mBAAmB,EAAE,mBAAmB,EAAC,MAAM,6BAA6B,CAAC;AAI1F,eAAO,MAAM,aAAa,GAAI,OAAO,mBAAmB,KAAG;IACzD,KAAK,EAAE,mBAAmB,EAAE,GAAG,IAAI,GAAG,SAAS,CAAC;CAiJjD,CAAC"}

package/lib/hooks/usePagination/usePagination.js

@@ -78,6 +78,7 @@ const usePagination = props => {
   // Convert the basic item list to contain PaginationItem props objects
   const items = itemList.map((item, idx) => typeof item === 'number' ? {
     id: idx.toString(),
+    // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
     onClick: event => {
       handleClick(event, item);
     },
@@ -87,6 +88,7 @@ const usePagination = props => {
     disabled
   } : {
     id: idx.toString(),
+    // @ts-ignore - TS7006 - Parameter 'event' implicitly has an 'any' type.
     onClick: event => {
       handleClick(event, buttonPage(item));
     },
@@ -96,6 +98,7 @@ const usePagination = props => {
     disabled: disabled || item.indexOf('ellipsis') === -1 && (item === 'next' || item === 'last' ? currentPage >= totalPages : currentPage <= 1)
   });
   return {
+    // @ts-ignore - TS2322 - Type '{ id: string; onClick: (event: any) => void; type: string; page: number | null; selected: boolean; disabled: boolean; }[]' is not assignable to type 'PaginationItemProps[]'.
     items
   };
 };

package/lib/hooks/usePagination/usePagination.stories.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: (props: import("../../components/Pagination").PaginationBaseProps) => {
+        items: import("../../components/Pagination").PaginationItemProps[] | null | undefined;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=usePagination.stories.d.ts.map

package/lib/hooks/usePagination/usePagination.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePagination.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/usePagination/usePagination.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;;;;;;;;;;;;;;;AAS1B,wBA0DE;AAEF,eAAO,MAAM,OAAO,QAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAElE,CAAC"}

package/lib/hooks/usePagination/usePagination.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Pagination = require("../../components/Pagination");
+var _usePagination = require("./usePagination");
+var _usePaginationStoriesModule = _interopRequireDefault(require("./usePagination.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/usePagination',
+  component: _usePagination.usePagination,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { usePagination } from "@spaced-out/ui-design-system/lib/hooks/usePagination";
+\`\`\`
+The \`usePagination\` hook is a custom hook that provides pagination functionality.
+It generates a list of pagination items based on the provided props, including
+the current page, total number of pages, and various display options.
+
+### Props Accepted
+- \`boundaryCount\` (optional): The number of pages to display at the beginning and end of the pagination. Defaults to 1.
+- \`totalPages\` (optional): The total number of pages. Defaults to 1.
+- \`disabled\` (optional): If set to \`true\`, the pagination functionality is disabled.
+- \`hideNextButton\` (optional): If set to \`true\`, the next button is hidden.
+- \`hidePrevButton\` (optional): If set to \`true\`, the previous button is hidden.
+- \`onChange\` (optional): A callback function called when a pagination item is clicked. Receives the selected page number and the event object.
+- \`currentPage\` (optional): The currently selected page. Defaults to 1.
+- \`showFirstButton\` (optional): If set to \`true\`, the first button is shown.
+- \`showLastButton\` (optional): If set to \`true\`, the last button is shown.
+- \`siblingCount\` (optional): The number of sibling pages to display before and after the current page. Defaults to 1.
+- \`style\` (optional): The style of the pagination. Can be 'primary' or 'secondary'. Defaults to 'primary'.
+
+### Props Returned
+- \`items\`: An array of pagination items with associated props.
+
+### Usage
+\`\`\`jsx
+import { usePagination } from './usePagination';
+
+const MyComponent = () => {
+  const { items } = usePagination({
+    boundaryCount: 1,
+    totalPages: 10,
+    disabled: false,
+    hideNextButton: false,
+    hidePrevButton: false,
+    onChange: (selectedPage, event) => {
+    },
+    currentPage: 1,
+    showFirstButton: false,
+    showLastButton: false,
+    siblingCount: 1,
+    style: 'primary',
+  });
+};
+
+export default MyComponent;
+\`\`\`
+          `
+      }
+    }
+  }
+};
+const Example = () => /*#__PURE__*/_react.default.createElement("div", {
+  className: _usePaginationStoriesModule.default.pagination
+}, /*#__PURE__*/_react.default.createElement(_Pagination.Pagination, {
+  currentPage: 10,
+  totalPages: 20
+}));
+exports.Example = Example;

package/lib/hooks/useReferenceElementWidth/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useReferenceElementWidth';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useReferenceElementWidth/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReferenceElementWidth/index.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.d.ts

@@ -0,0 +1,2 @@
+export declare function useReferenceElementWidth(ref?: HTMLElement | null, minWidth?: number): string;
+//# sourceMappingURL=useReferenceElementWidth.d.ts.map

package/lib/hooks/useReferenceElementWidth/useReferenceElementWidth.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReferenceElementWidth.d.ts","sourceRoot":"","sources":["../../../src/hooks/useReferenceElementWidth/useReferenceElementWidth.ts"],"names":[],"mappings":"AAOA,wBAAgB,wBAAwB,CAAC,GAAG,CAAC,EAAE,WAAW,GAAG,IAAI,EAAE,QAAQ,GAAE,MAAwB,GAAG,MAAM,CAW7G"}

package/lib/hooks/useResizeObserver/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useResizeObserver';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useResizeObserver/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/index.ts"],"names":[],"mappings":"AAAA,cAAc,qBAAqB,CAAC"}

package/lib/hooks/useResizeObserver/useResizeObserver.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare function useResizeObserver(): [React.Ref<'div'>, number];
+//# sourceMappingURL=useResizeObserver.d.ts.map

package/lib/hooks/useResizeObserver/useResizeObserver.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useResizeObserver.d.ts","sourceRoot":"","sources":["../../../src/hooks/useResizeObserver/useResizeObserver.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,wBAAgB,iBAAiB,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,MAAM,CAAC,CAyB9D"}

package/lib/hooks/useResizeObserver/useResizeObserver.js

@@ -14,11 +14,14 @@ function useResizeObserver() {
     if (!node) {
       return;
     }
+
+    // @ts-ignore - TS2345 - Argument of type '([entry]: [any]) => void' is not assignable to parameter of type 'ResizeObserverCallback'.
     const resizeObserver = new ResizeObserver(_ref => {
       let [entry] = _ref;
       setHeight(entry.contentRect.height);
     });
     resizeObserver.observe(node);
+    // @ts-ignore - TS2339 - Property 'getBoundingClientRect' does not exist on type 'never'.
     setHeight(node.getBoundingClientRect().height);
     return () => {
       resizeObserver.disconnect();

package/lib/hooks/useToastPortal/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useToastPortal';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useToastPortal/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToastPortal/index.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/lib/hooks/useToastPortal/useToastPortal.d.ts

@@ -0,0 +1,10 @@
+type UseToastPortal = {
+    toastRef: {
+        current: HTMLDivElement | null;
+    };
+};
+export declare const useToastPortal: ({ toastRef, }: UseToastPortal) => {
+    loaded: boolean;
+};
+export {};
+//# sourceMappingURL=useToastPortal.d.ts.map

package/lib/hooks/useToastPortal/useToastPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToastPortal.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToastPortal/useToastPortal.ts"],"names":[],"mappings":"AAMA,KAAK,cAAc,GAAG;IACpB,QAAQ,EAAE;QACR,OAAO,EAAE,cAAc,GAAG,IAAI,CAAC;KAChC,CAAC;CACH,CAAC;AAEF,eAAO,MAAM,cAAc,GACzB,eAEG,cAAc,KAChB;IACD,MAAM,EAAE,OAAO,CAAC;CAgBjB,CAAC"}

package/lib/hooks/useToastPortal/useToastPortal.js

@@ -12,16 +12,16 @@ const useToastPortal = _ref => {
     toastRef
   } = _ref;
   const [loaded, setLoaded] = (0, _react.useState)(false);
+
+  // @ts-ignore - TS2345 - Argument of type '() => () => HTMLDivElement' is not assignable to parameter of type 'EffectCallback'.
   (0, _react.useEffect)(() => {
     const div = document.createElement('div');
 
-    // $FlowFixMe[incompatible-type];
+    // @ts-ignore - TS2540 - Cannot assign to 'style' because it is a read-only property.
     div.style = `position: fixed; bottom: ${_space.spaceMedium}; left: ${_space.spaceMedium}; z-index: ${_elevation.elevationToast};`;
-    /* $FlowIgnore */
     document.body.prepend(div);
     toastRef.current = div;
     setLoaded(true);
-    /* $FlowIgnore */
     return () => document.body.removeChild(div);
   }, []);
   return {

package/lib/hooks/useToggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useToggle';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useToggle/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToggle/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAC"}

package/lib/hooks/useToggle/useToggle.d.ts

@@ -0,0 +1,2 @@
+export declare function useToggle(initialState?: boolean): [boolean, (newValue: boolean) => void];
+//# sourceMappingURL=useToggle.d.ts.map

package/lib/hooks/useToggle/useToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToggle/useToggle.ts"],"names":[],"mappings":"AAGA,wBAAgB,SAAS,CAAC,YAAY,GAAE,OAAe,GAAG,CAAC,OAAO,EAAE,CAAC,QAAQ,EAAE,OAAO,KAAK,IAAI,CAAC,CAS/F"}

package/lib/hooks/useToggle/useToggle.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useToggle } from './useToggle';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: typeof useToggle;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=useToggle.stories.d.ts.map

package/lib/hooks/useToggle/useToggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToggle.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/useToggle/useToggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAK1B,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;;;;;;;;;;;;;AAKtC,wBA2CE;AAEF,eAAO,MAAM,OAAO,QAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAcxE,CAAC"}

package/lib/hooks/useToggle/useToggle.stories.js

@@ -0,0 +1,68 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Button = require("../../components/Button");
+var _Text = require("../../components/Text");
+var _useToggle = require("./useToggle");
+var _useToggleStoriesModule = _interopRequireDefault(require("./useToggle.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useToggle',
+  component: _useToggle.useToggle,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useToggle } from "@spaced-out/ui-design-system/lib/hooks/useToggle";
+\`\`\`
+The \`useToggle\` hook is a custom hook that provides a boolean state value and a function to toggle its value between true and false.
+
+### Props Accepted
+- \`initialState\` (optional): The initial state value. Defaults to false.
+
+### Props Returned
+- \`stateValue\`: The current state value.
+- \`toggle\`: A function to toggle the state value.
+
+### Usage
+\`\`\`jsx
+import { useToggle } from './useToggle';
+
+const MyComponent = () => {
+  const [isActive, toggleActive] = useToggle(false);
+
+  return (
+    <div>
+      <button onClick={toggleActive}>
+        Toggle
+      </button>
+      {isActive && <BodyLarge>Active</BodyLarge>}
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+          `
+      }
+    }
+  }
+};
+const Example = () => {
+  const [isActive, toggleActive] = (0, _useToggle.useToggle)(false);
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    className: _useToggleStoriesModule.default.button,
+    onClick: toggleActive
+  }, "Toggle"), isActive && /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    className: _useToggleStoriesModule.default.text
+  }, "Active"), !isActive && /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    className: _useToggleStoriesModule.default.text
+  }, "InActive"));
+};
+exports.Example = Example;

package/lib/hooks/useWindowSize/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useWindowSize';
+//# sourceMappingURL=index.d.ts.map

package/lib/hooks/useWindowSize/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWindowSize/index.ts"],"names":[],"mappings":"AAAA,cAAc,iBAAiB,CAAC"}

package/lib/hooks/useWindowSize/useWindowSize.d.ts

@@ -0,0 +1,7 @@
+type WindowSize = {
+    width: number;
+    height: number;
+};
+export declare function useWindowSize(): WindowSize;
+export {};
+//# sourceMappingURL=useWindowSize.d.ts.map

package/lib/hooks/useWindowSize/useWindowSize.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWindowSize/useWindowSize.ts"],"names":[],"mappings":"AAIA,KAAK,UAAU,GAAG;IAChB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAIF,wBAAgB,aAAa,IAAI,UAAU,CA2B1C"}

package/lib/hooks/useWindowSize/useWindowSize.stories.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { useWindowSize } from './useWindowSize';
+declare const _default: {
+    tags: string[];
+    title: string;
+    component: typeof useWindowSize;
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Example: () => React.ReactElement<React.ComponentProps<"div">>;
+//# sourceMappingURL=useWindowSize.stories.d.ts.map

package/lib/hooks/useWindowSize/useWindowSize.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useWindowSize.stories.d.ts","sourceRoot":"","sources":["../../../src/hooks/useWindowSize/useWindowSize.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;;;;;;;;;;;;;AAK9C,wBAqCE;AAEF,eAAO,MAAM,OAAO,QAAO,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,CAaxE,CAAC"}

package/lib/hooks/useWindowSize/useWindowSize.stories.js

@@ -0,0 +1,58 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Example = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _Text = require("../../components/Text");
+var _useWindowSize = require("./useWindowSize");
+var _useWindowSizeStoriesModule = _interopRequireDefault(require("./useWindowSize.stories.module.css"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+var _default = exports.default = {
+  tags: ['autodocs'],
+  title: 'Hooks/useWindowSize',
+  component: _useWindowSize.useWindowSize,
+  parameters: {
+    docs: {
+      description: {
+        component: `
+\`\`\`js
+import { useWindowSize } from "@spaced-out/ui-design-system/lib/hooks/useWindowSize";
+\`\`\`
+The \`useWindowSize\` hook is a custom hook that provides the current dimensions of the window as an object with the \`width\` and \`height\` properties.
+
+### Props Returned
+- \`windowSize\`: An object containing the current dimensions of the window.
+
+### Usage
+\`\`\`jsx
+import { useWindowSize } from './useWindowSize';
+
+const MyComponent = () => {
+  const windowSize = useWindowSize();
+
+  return (
+    <div>
+      <BodyLarge>Window Width: {windowSize.width}px</BodyLarge>
+      <BodyLarge>Window Height: {windowSize.height}px</BodyLarge>
+    </div>
+  );
+};
+
+export default MyComponent;
+\`\`\`
+          `
+      }
+    }
+  }
+};
+const Example = () => {
+  const windowSize = (0, _useWindowSize.useWindowSize)();
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    className: _useWindowSizeStoriesModule.default.text
+  }, "Window Width: ", windowSize.width, "px"), /*#__PURE__*/_react.default.createElement(_Text.BodyLarge, {
+    className: _useWindowSizeStoriesModule.default.text
+  }, "Window Height: ", windowSize.height, "px"));
+};
+exports.Example = Example;

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export * from './hooks';
+export * from './styles';
+export * from './types';
+export * from './utils';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,SAAS,CAAC;AACxB,cAAc,UAAU,CAAC;AAEzB,cAAc,SAAS,CAAC;AACxB,cAAc,SAAS,CAAC"}

package/lib/stories/Border/Border.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    parameters: {
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Border: () => React.JSX.Element;
+//# sourceMappingURL=Border.stories.d.ts.map

package/lib/stories/Border/Border.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Border.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Border/Border.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAiC/B,wBAOE;AA8BF,eAAO,MAAM,OAAO,yBAkOnB,CAAC"}

package/lib/stories/Color/Color.stories.d.ts

@@ -0,0 +1,13 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    parameters: {
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _BaseColor: () => React.JSX.Element;
+export declare const _AliasColor: () => React.JSX.Element;
+//# sourceMappingURL=Color.stories.d.ts.map

package/lib/stories/Color/Color.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Color.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Color/Color.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAkC/B,wBAOE;AAeF,eAAO,MAAM,UAAU,yBA8CtB,CAAC;AAgBF,eAAO,MAAM,WAAW,yBA6NvB,CAAC"}

package/lib/stories/Elevation/Elevation.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    parameters: {
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Elevation: () => React.JSX.Element;
+//# sourceMappingURL=Elevation.stories.d.ts.map

package/lib/stories/Elevation/Elevation.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Elevation.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Elevation/Elevation.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAgC/B,wBAOE;AA4BF,eAAO,MAAM,UAAU,yBAkNtB,CAAC"}

package/lib/stories/Introduction/index.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const IntroductionDoc: () => React.JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/lib/stories/Introduction/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/stories/Introduction/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,eAAO,MAAM,eAAe,yBAQrB,CAAC"}

package/lib/stories/Motion/Motion.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    parameters: {
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Motion: () => React.JSX.Element;
+//# sourceMappingURL=Motion.stories.d.ts.map

package/lib/stories/Motion/Motion.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Motion.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Motion/Motion.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAgC/B,wBAOE;AA6BF,eAAO,MAAM,OAAO,yBAkOnB,CAAC"}

package/lib/stories/Opacity/Opacity.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    parameters: {
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Opacity: () => React.JSX.Element;
+//# sourceMappingURL=Opacity.stories.d.ts.map

package/lib/stories/Opacity/Opacity.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Opacity.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Opacity/Opacity.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AAgC/B,wBAOE;AA6BF,eAAO,MAAM,QAAQ,yBAkMpB,CAAC"}

package/lib/stories/Shadow/Shadow.stories.d.ts

@@ -0,0 +1,12 @@
+import * as React from 'react';
+declare const _default: {
+    title: string;
+    parameters: {
+        storySource: {
+            componentPath: string;
+        };
+    };
+};
+export default _default;
+export declare const _Shadow: () => React.JSX.Element;
+//# sourceMappingURL=Shadow.stories.d.ts.map

package/lib/stories/Shadow/Shadow.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Shadow.stories.d.ts","sourceRoot":"","sources":["../../../src/stories/Shadow/Shadow.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;;;;;;;;;AA+B/B,wBAOE;AA+BF,eAAO,MAAM,OAAO,yBA6MnB,CAAC"}