@100mslive/roomkit-react 0.4.3-alpha.0 → 0.4.3-alpha.2

package/dist/meta.cjs.json

@@ -2115,7 +2115,7 @@
       "format": "esm"
     },
     "../../node_modules/lodash/lodash.js": {
-      "bytes": 544098,
+      "bytes": 545267,
       "imports": [
         {
           "path": "<define:process.env>",
@@ -2369,7 +2369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppContext.tsx": {
-      "bytes": 881,
+      "bytes": 909,
       "imports": [
         {
           "path": "react",
@@ -11311,7 +11311,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-3217-x1SptFJQkNkc/19c650369c53/tldraw.css": {
+    "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f743b3/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11361,7 +11361,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-3217-x1SptFJQkNkc/19c650369ab1/index.css": {
+    "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11370,7 +11370,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-3217-x1SptFJQkNkc/19c650369c53/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f743b3/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11445,7 +11445,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-3217-x1SptFJQkNkc/19c650369ab1/index.css",
+          "path": "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12168,7 +12168,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 28662,
+      "bytes": 30184,
       "imports": [
         {
           "path": "react",
@@ -12295,6 +12295,11 @@
           "kind": "import-statement",
           "original": "../../Tooltip"
         },
+        {
+          "path": "src/Prebuilt/AppContext.tsx",
+          "kind": "import-statement",
+          "original": "../AppContext"
+        },
         {
           "path": "src/Prebuilt/layouts/WaitingView.tsx",
           "kind": "import-statement",
@@ -14591,7 +14596,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10920,
+      "bytes": 11117,
       "imports": [
         {
           "path": "react",
@@ -15709,7 +15714,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3693889
+      "bytes": 3698218
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -19042,10 +19047,10 @@
       "cssBundle": "dist/index.cjs.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 22381
+          "bytesInOutput": 21789
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224317
+          "bytesInOutput": 225096
         },
         "../../node_modules/lodash.isequal/index.js": {
           "bytesInOutput": 26597
@@ -19321,7 +19326,7 @@
           "bytesInOutput": 925
         },
         "src/Prebuilt/App.tsx": {
-          "bytesInOutput": 8536
+          "bytesInOutput": 8704
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6918
@@ -19920,7 +19925,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 3051
         },
-        "../../../../../../../tmp/tmp-3217-x1SptFJQkNkc/19c650369ab1/index.css": {
+        "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19930,7 +19935,7 @@
           "bytesInOutput": 2922
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 30000
+          "bytesInOutput": 31534
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3395
@@ -20155,7 +20160,7 @@
           "bytesInOutput": 2777
         }
       },
-      "bytes": 1522889
+      "bytes": 1524778
     },
     "dist/index.cjs.css.map": {
       "imports": [],
@@ -20217,10 +20222,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-3217-x1SptFJQkNkc/19c650369c53/tldraw.css": {
+        "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f743b3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-3217-x1SptFJQkNkc/19c650369ab1/index.css": {
+        "../../../../../../../tmp/tmp-3260-PUBvZrZvdKvu/19cae6f742e1/index.css": {
           "bytesInOutput": 401
         }
       },

package/dist/meta.esbuild.json

@@ -2115,7 +2115,7 @@
       "format": "esm"
     },
     "../../node_modules/lodash/lodash.js": {
-      "bytes": 544098,
+      "bytes": 545267,
       "imports": [
         {
           "path": "<define:process.env>",
@@ -2369,7 +2369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/AppContext.tsx": {
-      "bytes": 881,
+      "bytes": 909,
       "imports": [
         {
           "path": "react",
@@ -11311,7 +11311,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-3217-WBrHgiOoX1zP/19c650369c42/tldraw.css": {
+    "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f743b2/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -11361,7 +11361,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-3217-WBrHgiOoX1zP/19c650369660/index.css": {
+    "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -11370,7 +11370,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-3217-WBrHgiOoX1zP/19c650369c42/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f743b2/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -11445,7 +11445,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-3217-WBrHgiOoX1zP/19c650369660/index.css",
+          "path": "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12168,7 +12168,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 28662,
+      "bytes": 30184,
       "imports": [
         {
           "path": "react",
@@ -12295,6 +12295,11 @@
           "kind": "import-statement",
           "original": "../../Tooltip"
         },
+        {
+          "path": "src/Prebuilt/AppContext.tsx",
+          "kind": "import-statement",
+          "original": "../AppContext"
+        },
         {
           "path": "src/Prebuilt/layouts/WaitingView.tsx",
           "kind": "import-statement",
@@ -14591,7 +14596,7 @@
       "format": "esm"
     },
     "src/Prebuilt/App.tsx": {
-      "bytes": 10920,
+      "bytes": 11117,
       "imports": [
         {
           "path": "react",
@@ -15709,7 +15714,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3733859
+      "bytes": 3738197
     },
     "dist/index.js": {
       "imports": [
@@ -19108,10 +19113,10 @@
       "cssBundle": "dist/index.css",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 22381
+          "bytesInOutput": 21789
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224312
+          "bytesInOutput": 225091
         },
         "../../node_modules/lodash.isequal/index.js": {
           "bytesInOutput": 26591
@@ -19387,7 +19392,7 @@
           "bytesInOutput": 887
         },
         "src/Prebuilt/App.tsx": {
-          "bytesInOutput": 8036
+          "bytesInOutput": 8204
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
           "bytesInOutput": 6633
@@ -19986,7 +19991,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2830
         },
-        "../../../../../../../tmp/tmp-3217-WBrHgiOoX1zP/19c650369660/index.css": {
+        "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -19996,7 +20001,7 @@
           "bytesInOutput": 2787
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 28045
+          "bytesInOutput": 29541
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3171
@@ -20221,7 +20226,7 @@
           "bytesInOutput": 2632
         }
       },
-      "bytes": 1468015
+      "bytes": 1469866
     },
     "dist/index.css.map": {
       "imports": [],
@@ -20283,10 +20288,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-3217-WBrHgiOoX1zP/19c650369c42/tldraw.css": {
+        "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f743b2/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-3217-WBrHgiOoX1zP/19c650369660/index.css": {
+        "../../../../../../../tmp/tmp-3260-F7uOIFgAcFyi/19cae6f73df0/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.4.3-alpha.0",
+  "version": "0.4.3-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -42,8 +42,6 @@
     "lint": "eslint -c .eslintrc --no-error-on-unmatched-pattern src --ext .js --ext .jsx --ext .ts --ext .tsx",
     "lint:fix": "yarn lint --fix",
     "format": "prettier -w src/**",
-    "storybook": "sb dev -p 6006",
-    "build-storybook": "sb build",
     "babel": "npx storybook@latest babelrc"
   },
   "devDependencies": {
@@ -51,15 +49,6 @@
     "@babel/preset-env": "^7.22.5",
     "@babel/preset-react": "^7.22.5",
     "@babel/preset-typescript": "^7.22.5",
-    "@storybook/addon-a11y": "^7.0.27",
-    "@storybook/addon-actions": "^7.0.27",
-    "@storybook/addon-essentials": "^7.0.27",
-    "@storybook/addon-interactions": "^7.0.27",
-    "@storybook/addon-links": "^7.0.27",
-    "@storybook/cli": "^7.0.27",
-    "@storybook/react": "^7.0.27",
-    "@storybook/react-webpack5": "^7.0.27",
-    "@storybook/testing-library": "^0.2.0",
     "@types/lodash.merge": "^4.6.6",
     "@types/mdx": "2.0.2",
     "@types/react": "^18.1.0",
@@ -68,19 +57,18 @@
     "babel-plugin-react-require": "3.1.3",
     "esbuild-loader": "^4.0.2",
     "knip": "^5.11.0",
-    "react": "^18.1.0",
-    "storybook-dark-mode": "^3.0.0"
+    "react": "^18.1.0"
   },
   "peerDependencies": {
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.4.3-alpha.0",
+    "@100mslive/hls-player": "0.4.3-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.2",
-    "@100mslive/hms-virtual-background": "1.14.3-alpha.0",
-    "@100mslive/hms-whiteboard": "0.1.3-alpha.0",
-    "@100mslive/react-icons": "0.11.3-alpha.0",
-    "@100mslive/react-sdk": "0.11.3-alpha.0",
+    "@100mslive/hms-virtual-background": "1.14.3-alpha.2",
+    "@100mslive/hms-whiteboard": "0.1.3-alpha.2",
+    "@100mslive/react-icons": "0.11.3-alpha.2",
+    "@100mslive/react-sdk": "0.11.3-alpha.2",
     "@100mslive/types-prebuilt": "0.12.12",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -117,5 +105,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "f1f1e1e72eb47deed22698a3c7a1fd10d9dcd0af"
+  "gitHead": "b2be1a31b8d79a33a3e2f4f2475a483d68fdffbb"
 }

package/src/Prebuilt/App.tsx

@@ -57,6 +57,7 @@ export type HMSPrebuiltOptions = {
   userId?: string;
   endpoints?: object;
   effectsSDKKey?: string;
+  managementToken?: string;
 };
 
 export type HMSPrebuiltProps = {
@@ -93,7 +94,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       logo,
       typography,
       themes,
-      options: { userName = '', userId = '', endpoints } = {},
+      options: { userName = '', userId = '', endpoints, managementToken } = {},
       screens,
       leaveOnUnload = true,
       onLeave,
@@ -141,12 +142,14 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
           tokenByRoomCode: string;
           roomLayout: string;
           event: string;
+          passport: string;
         }
       | undefined;
     const tokenByRoomCodeEndpoint = endpointsObj?.tokenByRoomCode;
     const initEndpoint = endpointsObj?.init;
     const eventEndpoint = endpointsObj?.event;
     const roomLayoutEndpoint = endpointsObj?.roomLayout;
+    const passportEndpoint = endpointsObj?.passport;
 
     const overrideLayout: Partial<Layout> = {
       logo,
@@ -180,11 +183,13 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             onJoin,
             userName,
             userId,
+            managementToken,
             endpoints: {
               tokenByRoomCode: tokenByRoomCodeEndpoint,
               init: initEndpoint,
               roomLayout: roomLayoutEndpoint,
               event: eventEndpoint,
+              passport: passportEndpoint,
             },
           }}
         >

package/src/Prebuilt/AppContext.tsx

@@ -8,6 +8,7 @@ type HMSPrebuiltContextType = {
   userId?: string;
   containerSelector: string;
   endpoints?: Record<string, string | undefined>;
+  managementToken?: string;
   onLeave?: () => void;
   onJoin?: () => void;
 };

package/src/Prebuilt/layouts/HLSView.jsx

@@ -34,6 +34,7 @@ import { Loading } from '../../Loading';
 import { Text } from '../../Text';
 import { config, theme, useTheme } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
+import { useHMSPrebuiltContext } from '../AppContext';
 import { WaitingView } from './WaitingView';
 import { useSidepaneToggle } from '../components/AppData/useSidepane';
 import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
@@ -79,6 +80,8 @@ const HLSView = () => {
   const [streamEnded, setStreamEnded] = useState(false);
   let [hlsStatsState, setHlsStatsState] = useState(null);
   const hlsUrl = hlsState.variants[0]?.url;
+  const { endpoints, managementToken } = useHMSPrebuiltContext();
+  const [resolvedHlsUrl, setResolvedHlsUrl] = useState(null);
   const [availableLayers, setAvailableLayers] = useState([]);
   const [isVideoLive, setIsVideoLive] = useState(true);
   const [isCaptionEnabled, setIsCaptionEnabled] = useState(true);
@@ -92,7 +95,7 @@ const HLSView = () => {
   });
   const [isPaused, setIsPaused] = useState(false);
   const [show, toggle] = useToggle(false);
-  const lastHlsUrl = usePrevious(hlsUrl);
+  const lastHlsUrl = usePrevious(resolvedHlsUrl);
   const vanillaStore = useHMSVanillaStore();
   const [controlsVisible, setControlsVisible] = useState(true);
   const [isUserSelectedAuto, setIsUserSelectedAuto] = useState(true);
@@ -133,6 +136,50 @@ const HLSView = () => {
     }
   }, [hlsUrl, streamEnded, lastHlsUrl]);
 
+  // Fetch signed URL from passport-api for authenticated CDN streams
+  useEffect(() => {
+    if (!hlsUrl) {
+      setResolvedHlsUrl(null);
+      return;
+    }
+    if (!hlsUrl.includes('/s/')) {
+      setResolvedHlsUrl(hlsUrl);
+      return;
+    }
+    const passportEndpoint = endpoints?.passport;
+    if (!passportEndpoint || !managementToken) {
+      setResolvedHlsUrl(hlsUrl);
+      return;
+    }
+    let cancelled = false;
+    const fetchSignedUrl = async () => {
+      try {
+        const resp = await fetch(`${passportEndpoint}/token`, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authorization: `Bearer ${managementToken}`,
+          },
+          body: JSON.stringify({ url: hlsUrl }),
+        });
+        if (!resp.ok) throw new Error(`passport-api returned ${resp.status}`);
+        const data = await resp.json();
+        if (!cancelled) {
+          setResolvedHlsUrl(data.tokenized_url || hlsUrl);
+        }
+      } catch (err) {
+        console.error('[HLSView] Failed to fetch signed URL from passport-api:', err);
+        if (!cancelled) {
+          setResolvedHlsUrl(hlsUrl);
+        }
+      }
+    };
+    fetchSignedUrl();
+    return () => {
+      cancelled = true;
+    };
+  }, [hlsUrl, endpoints?.passport, managementToken]);
+
   useEffect(() => {
     if (!notification) return;
     const toastID = toastMap?.[notification.data.id];
@@ -261,8 +308,8 @@ const HLSView = () => {
     };
 
     const handleAutoplayBlock = data => setIsHlsAutoplayBlocked(!!data);
-    if (videoEl && hlsUrl) {
-      hlsPlayer = new HMSHLSPlayer(hlsUrl, videoEl);
+    if (videoEl && resolvedHlsUrl) {
+      hlsPlayer = new HMSHLSPlayer(resolvedHlsUrl, videoEl);
       hlsPlayer.on(HMSHLSPlayerEvents.SEEK_POS_BEHIND_LIVE_EDGE, handleNoLongerLive);
       hlsPlayer.on(HMSHLSPlayerEvents.TIMED_METADATA_LOADED, metadataLoadedHandler);
       hlsPlayer.on(HMSHLSPlayerEvents.ERROR, handleError);
@@ -286,7 +333,7 @@ const HLSView = () => {
       };
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [hlsUrl, vanillaStore, hmsActions]);
+  }, [resolvedHlsUrl, vanillaStore, hmsActions]);
 
   /**
    * initialize and subscribe to hlsState

package/src/Accordion/Accordion.stories.tsx

@@ -1,50 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Accordion } from '.';
-
-export default {
-  title: 'UI Components/Accordion',
-  component: Accordion.Root,
-} as ComponentMeta<typeof Accordion.Root>;
-
-function AccordionItem({ value, header, content }: { value: string; header: string; content: string }) {
-  return (
-    <Accordion.Item value={value}>
-      <Accordion.Header css={{ padding: '$8 $9' }}>{header}</Accordion.Header>
-      <Accordion.Content contentStyles={{ padding: '$8 $9' }}>
-        <>
-          {content}
-          <Accordion.Item value={value + '1'}>
-            <Accordion.Header css={{ padding: '$8 $9' }}>nested header</Accordion.Header>
-            <Accordion.Content contentStyles={{ padding: '$8 $9' }}>nested item</Accordion.Content>
-          </Accordion.Item>
-        </>
-      </Accordion.Content>
-    </Accordion.Item>
-  );
-}
-
-const Template = () => {
-  return (
-    <Accordion.Root type="multiple" defaultValue={['item-1']} css={{ width: '300px' }}>
-      <AccordionItem
-        value="item-1"
-        header="Is it accessible?"
-        content="Yes. It adheres to the WAI-ARIA design pattern."
-      />
-      <AccordionItem
-        value="item-2"
-        header="Is it unstyled?"
-        content="Yes. It's unstyled by default, giving you freedom over the look and feel."
-      />
-      <AccordionItem
-        value="item-3"
-        header="Can it be animated?"
-        content="Yes! You can animate the Accordion. with CSS or JavaScript."
-      />
-    </Accordion.Root>
-  );
-};
-
-export const AccordionContent: ComponentStory<typeof Accordion.Root> = Template.bind({});
-AccordionContent.storyName = 'Accordion';

package/src/Avatar/Avatar.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import { ComponentMeta, ComponentStory } from '@storybook/react';
-import { Avatar } from '.';
-
-export default {
-  title: 'UI Components/Avatar',
-  component: Avatar,
-  argTypes: {
-    ref: { table: { disable: true } },
-  },
-  args: {
-    name: '100ms',
-  },
-} as ComponentMeta<typeof Avatar>;
-
-export const Square: ComponentStory<typeof Avatar> = args => {
-  return <Avatar css={{ width: '50px', height: '50px' }} shape="square" {...args} />;
-};
-
-export const Circle: ComponentStory<typeof Avatar> = args => {
-  return <Avatar css={{ width: '50px', height: '50px' }} shape="circle" {...args} />;
-};
-
-export const Playground = ({ height = 50, width = 50, css = {}, shape = 'circle' as const, name = '' }) => {
-  return <Avatar css={{ width: width, height: height, ...css }} name={name} shape={shape} />;
-};
-
-Playground.storyName = 'Avatar';
-Playground.argTypes = {
-  height: { control: { type: 'number' } },
-  width: { control: { type: 'number' } },
-  shape: { options: ['square', 'circle'], defaultValue: 'square', control: { type: 'select' } },
-};

package/src/Button/Button.mdx

@@ -1,43 +0,0 @@
-import { Story, Props, Preview } from '@storybook/addon-docs';
-
-import { Button } from '.';
-import { HangUpIcon } from '@100mslive/react-icons';
-
-## Button
-
-The button has three possible variants,
-
-- Primary,
-- Standard, and
-- Danger
-
-Button can also have an icon, you can add the icon as a children of that Button. The `icon` attribute will add a padding
-between those children elements.
-
-A Button also have an attribute `outlined` which will add an outline to that Button.
-
-### Primary
-
-<Preview>
-  <Story id="ui-components-button--primary" />
-</Preview>
-
-### Standard
-
-<Preview>
-  <Story id="ui-components-button--standard" />
-</Preview>
-
-### Danger
-
-<Preview>
-  <Story id="ui-components-button--danger" />
-</Preview>
-
-### With Icon
-
-<Preview>
-  <Story id="ui-components-button--with-icon" />
-</Preview>
-
-<Props />