@hyphen/hyphen-components 2.22.1 → 2.24.0

package/dist/index.d.ts

@@ -5,6 +5,7 @@ export * from './components/Button/Button';
 export * from './components/Card/Card';
 export * from './components/CheckboxInput/components/Checkbox';
 export * from './components/CheckboxInput/CheckboxInput';
+export * from './components/Collapsible/Collapsible';
 export * from './components/DateInput/DateInput';
 export * from './components/DatePicker/DatePicker';
 export * from './components/Details/Details';

package/dist/lib/tokens.d.ts

@@ -1,5 +1,5 @@
 import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
-export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
+export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-env" | "logo-link" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
 export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
 export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
 export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];
@@ -14,7 +14,7 @@ export declare const FONT_FAMILY_OPTIONS: ("monospace" | "body" | "brand")[];
 export declare const FONT_WEIGHT_OPTIONS: ("light" | "normal" | "medium" | "semibold" | "bold")[];
 export declare const HEADING_SIZE_OPTIONS: ("sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl")[];
 export declare const HEIGHT_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
-export declare const LINE_HEIGHT_OPTIONS: ("base" | "input" | "heading" | "text")[];
+export declare const LINE_HEIGHT_OPTIONS: ("base" | "none" | "input" | "heading" | "text")[];
 export declare const SPACING_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "auto")[];
 export declare const WIDTH_OPTIONS: ("0" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "2xs" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl" | "9xl" | "10xl" | "10" | "15" | "20" | "25" | "30" | "33" | "34" | "40" | "50" | "60" | "70" | "75" | "80" | "90" | "100")[];
 export declare const Z_INDEX_OPTIONS: ("0" | "modal" | "popover" | "overlay" | "drawer" | "sticky")[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "2.22.1",
+  "version": "2.24.0",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -65,13 +65,13 @@
     "@chromatic-com/storybook": "^1.8.0",
     "@semantic-release/commit-analyzer": "^11.1.0",
     "@size-limit/preset-small-lib": "^11.1.4",
-    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/addon-essentials": "^8.4.2",
     "@storybook/addon-interactions": "^8.3.5",
     "@storybook/addon-themes": "^8.2.9",
     "@storybook/blocks": "^8.2.9",
     "@storybook/manager-api": "^8.2.9",
     "@storybook/react": "^8.2.9",
-    "@storybook/react-vite": "^8.2.9",
+    "@storybook/react-vite": "^8.4.2",
     "@storybook/test": "^8.3.5",
     "@storybook/theming": "^8.2.9",
     "@testing-library/jest-dom": "^6.5.0",
@@ -79,6 +79,7 @@
     "@testing-library/user-event": "^14.5.2",
     "@tsconfig/recommended": "^1.0.7",
     "@tsconfig/vite-react": "^3.0.2",
+    "@types/node": "^22.9.0",
     "@types/react": "^18.3.5",
     "@types/react-datepicker": "^6.2.0",
     "@types/react-dom": "^18.3.0",
@@ -121,8 +122,10 @@
     "@rollup/rollup-linux-x64-gnu": "^4.21.2"
   },
   "dependencies": {
-    "@hyphen/hyphen-design-tokens": "^4.14.0",
+    "@hyphen/hyphen-design-tokens": "^4.18.0",
     "@popperjs/core": "^2.11.8",
+    "@radix-ui/react-collapsible": "^1.1.1",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@types/react-modal": "^3.16.3",
     "classnames": "^2.5.1",
     "date-fns": "^2.16.1",

package/src/components/Collapsible/Collapsible.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { Collapsible, CollapsibleTrigger } from './Collapsible';
+import * as Stories from './Collapsible.stories';
+
+<Meta of={Stories} />
+
+# Collapsible
+
+Collapsible components are used to hide or show content based on user interaction. 
+
+This component is extended from [Radix](https://www.radix-ui.com/primitives/docs/components/collapsible).
+
+[API Reference](https://www.radix-ui.com/primitives/docs/components/collapsible#api-reference)
+
+<Canvas of={Stories.Uncontrolled} />
+
+## Controlled
+
+The `open` prop can be used to control the state of the collapsible component.
+
+<Canvas of={Stories.Controlled} />

package/src/components/Collapsible/Collapsible.stories.tsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Collapsible,
+  CollapsibleTrigger,
+  CollapsibleContent,
+} from './Collapsible';
+import { Button } from '../Button/Button';
+import { Box } from '../Box/Box';
+import { userEvent, within, expect } from '@storybook/test';
+
+const meta: Meta<typeof Collapsible> = {
+  title: 'Components/Collapsible',
+  component: Collapsible,
+};
+
+export default meta;
+type Story = StoryObj<typeof Collapsible>;
+
+export const Uncontrolled = () => (
+  <Collapsible>
+    <CollapsibleTrigger asChild>
+      <Button variant="primary">Can I use this in my project?</Button>
+    </CollapsibleTrigger>
+    <CollapsibleContent>
+      Yes. Free to use for personal and commercial projects. No attribution
+      required.
+    </CollapsibleContent>
+  </Collapsible>
+);
+
+export function Controlled() {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <Collapsible
+      open={isOpen}
+      onOpenChange={setIsOpen}
+      className="display-flex flex-direction-column g-sm w-9xl"
+    >
+      <Box
+        alignItems="center"
+        justifyContent="space-between"
+        padding="sm 0"
+        direction="row"
+      >
+        <h4 className="text-sm font-semibold">
+          @peduarte starred 3 repositories
+        </h4>
+        <CollapsibleTrigger asChild>
+          <Button
+            variant="tertiary"
+            iconPrefix={isOpen ? 'remove' : 'caret-up-down'}
+            size="sm"
+            aria-label="toggle"
+          />
+        </CollapsibleTrigger>
+      </Box>
+      <Box
+        fontFamily="monospace"
+        radius="sm"
+        padding="md"
+        fontSize="sm"
+        borderWidth="sm"
+        borderColor="default"
+      >
+        @radix-ui/primitives
+      </Box>
+      <CollapsibleContent className="display-flex flex-direction-column g-sm">
+        <Box
+          fontFamily="monospace"
+          radius="sm"
+          padding="md"
+          fontSize="sm"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          @radix-ui/colors
+        </Box>
+        <Box
+          fontFamily="monospace"
+          radius="sm"
+          padding="md"
+          fontSize="sm"
+          borderWidth="sm"
+          borderColor="default"
+        >
+          @stitches/react
+        </Box>
+      </CollapsibleContent>
+    </Collapsible>
+  );
+}
+
+export const ClickOpenCollapsible: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<Controlled />);
+    const canvas = within(canvasElement);
+
+    await userEvent.click(canvas.getByLabelText('toggle'));
+
+    await expect(canvas.getByText('@radix-ui/colors')).toBeInTheDocument();
+  },
+};

package/src/components/Collapsible/Collapsible.tsx

@@ -0,0 +1,9 @@
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+
+const Collapsible = CollapsiblePrimitive.Root;
+
+const CollapsibleTrigger = CollapsiblePrimitive.CollapsibleTrigger;
+
+const CollapsibleContent = CollapsiblePrimitive.CollapsibleContent;
+
+export { Collapsible, CollapsibleTrigger, CollapsibleContent };

package/src/components/DropdownMenu/DropdownMenu.mdx

@@ -0,0 +1,21 @@
+import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
+import { DropdownMenu } from './DropdownMenu';
+import * as Stories from './DropdownMenu.stories';
+
+<Meta of={Stories} />
+
+# DropdownMenu
+
+DropdownMenu components are used to hide or show content based on user interaction. 
+
+This component is extended from [Radix](https://www.radix-ui.com/primitives/docs/components/dropdown-menu).
+
+[API Reference](https://www.radix-ui.com/primitives/docs/components/dropdown-menu#api-reference)
+
+<Canvas of={Stories.Uncontrolled} />
+
+## Controlled
+
+The `open` prop can be used to control the state of the DropdownMenu component.
+
+<Canvas of={Stories.Controlled} />

package/src/components/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Button } from '../Button/Button';
+import { userEvent, within, expect } from '@storybook/test';
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuPortal,
+} from './DropdownMenu';
+import { DropdownMenuShortcut } from './DropdownMenu';
+
+const meta: Meta<typeof DropdownMenu> = {
+  title: 'Components/DropdownMenu',
+  component: DropdownMenu,
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenu>;
+
+export const Uncontrolled = () => (
+  <DropdownMenu>
+    <DropdownMenuTrigger asChild>
+      <Button variant="secondary">Open</Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent
+      className="w-9xl"
+      align="start"
+      side="bottom"
+      sideOffset={4}
+    >
+      <DropdownMenuLabel>My Account</DropdownMenuLabel>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Profile</span>
+          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Billing</span>
+          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Settings</span>
+          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+        </DropdownMenuItem>
+        <DropdownMenuItem>
+          <span>Keyboard shortcuts</span>
+          <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuGroup>
+        <DropdownMenuItem>
+          <span>Team</span>
+        </DropdownMenuItem>
+        <DropdownMenuSub>
+          <DropdownMenuSubTrigger>
+            <span>Invite users</span>
+          </DropdownMenuSubTrigger>
+          <DropdownMenuPortal>
+            <DropdownMenuSubContent>
+              <DropdownMenuItem>
+                <span>Email</span>
+              </DropdownMenuItem>
+              <DropdownMenuItem>
+                <span>Message</span>
+              </DropdownMenuItem>
+              <DropdownMenuSeparator />
+              <DropdownMenuItem>
+                <span>More...</span>
+              </DropdownMenuItem>
+            </DropdownMenuSubContent>
+          </DropdownMenuPortal>
+        </DropdownMenuSub>
+        <DropdownMenuItem>
+          <span>New Team</span>
+          <DropdownMenuShortcut>⌘+T</DropdownMenuShortcut>
+        </DropdownMenuItem>
+      </DropdownMenuGroup>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <span>Support</span>
+      </DropdownMenuItem>
+      <DropdownMenuItem disabled>
+        <span>API</span>
+      </DropdownMenuItem>
+      <DropdownMenuSeparator />
+      <DropdownMenuItem>
+        <span>Log out</span>
+        <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
+      </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
+);
+
+export const Controlled = () => {
+  const [isOpen, setIsOpen] = React.useState(false);
+
+  return (
+    <div>
+      <p>{`Dropdown is ${isOpen ? 'open' : 'closed'}`}</p>
+      <DropdownMenu open={isOpen} onOpenChange={setIsOpen}>
+        <DropdownMenuTrigger asChild>
+          <Button variant="secondary">Dropdown</Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent
+          className="w-9xl"
+          align="start"
+          side="bottom"
+          sideOffset={4}
+        >
+          <DropdownMenuItem>
+            <span>Profile</span>
+            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span>Billing</span>
+            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span>Settings</span>
+            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
+          </DropdownMenuItem>
+          <DropdownMenuItem>
+            <span>Keyboard shortcuts</span>
+            <DropdownMenuShortcut>⌘K</DropdownMenuShortcut>
+          </DropdownMenuItem>
+        </DropdownMenuContent>
+      </DropdownMenu>
+    </div>
+  );
+};
+
+export const ClickOpenDropdown: Story = {
+  play: async ({ canvasElement, mount }) => {
+    await mount(<Controlled />);
+    const canvas = within(canvasElement);
+    await expect(canvas.getByText('Dropdown is closed')).toBeInTheDocument();
+    await userEvent.click(canvas.getByText('Dropdown'));
+    await expect(canvas.getByText('Dropdown is open')).toBeInTheDocument();
+  },
+};

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import classNames from 'classnames';
+import { Icon } from '../Icon/Icon';
+
+const DropdownMenu = DropdownMenuPrimitive.Root;
+
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
+
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
+
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
+
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
+
+const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Item
+    ref={ref}
+    className={classNames(
+      'font-size-sm position-relative cursor-default display-flex br-sm align-items-center p-sm g-sm  outline-none hover:background-color-secondary focus:background-color-secondary',
+      inset && 'p-left-md',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+
+const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
+>(({ className, sideOffset = 4, ...props }, ref) => (
+  <DropdownMenuPrimitive.Portal>
+    <DropdownMenuPrimitive.Content
+      ref={ref}
+      sideOffset={sideOffset}
+      className={classNames(
+        'z-index-popover p-xs minw-7xl overflow-hidden br-sm bw-sm border-color-subtle background-color-primary font-color-base shadow-md',
+        className
+      )}
+      style={{
+        width: 'var(--radix-dropdown-menu-trigger-width)',
+      }}
+      {...props}
+    />
+  </DropdownMenuPrimitive.Portal>
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+
+const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(({ className, inset, ...props }, ref) => (
+  <DropdownMenuPrimitive.Label
+    ref={ref}
+    className={classNames(
+      'display-flex align-items-center br-sm p-h-sm p-v-xs font-color-secondary font-size-xs font-weight-medium outline-none',
+      inset && 'p-left-md',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+
+const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.Separator
+    ref={ref}
+    className={classNames(
+      'h-2xs m-v-xs bw-top-sm border-color-subtle',
+      className
+    )}
+    style={{
+      marginLeft: 'calc(var(--size-spacing-md)*-1)',
+      marginRight: 'calc(var(--size-spacing-md)*-1)',
+    }}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+
+const DropdownMenuShortcut = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={classNames(
+        'm-left-auto font-size-xs font-color-tertiary',
+        className
+      )}
+      style={{ letterSpacing: '0.5px' }}
+      {...props}
+    />
+  );
+};
+DropdownMenuShortcut.displayName = 'DropdownMenuShortcut';
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(({ className, inset, children, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubTrigger
+    ref={ref}
+    className={classNames(
+      'display-flex cursor-default gap-xl align-items-center br-sm p-sm g-sm font-size-sm outline-none focus:background-color-secondary',
+      inset && 'p-left-md',
+      className
+    )}
+    {...props}
+  >
+    {children}
+    <Icon name="caret-sm-right" className="m-left-auto" />
+  </DropdownMenuPrimitive.SubTrigger>
+));
+DropdownMenuSubTrigger.displayName =
+  DropdownMenuPrimitive.SubTrigger.displayName;
+
+const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(({ className, ...props }, ref) => (
+  <DropdownMenuPrimitive.SubContent
+    ref={ref}
+    className={classNames(
+      'z-index-popover minw-7xl overflow-hidden br-sm border-color-subtle bw-sm background-color-primary p-xs font-color-primary shadow-lg',
+      className
+    )}
+    {...props}
+  />
+));
+DropdownMenuSubContent.displayName =
+  DropdownMenuPrimitive.SubContent.displayName;
+
+export {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuGroup,
+  DropdownMenuPortal,
+  DropdownMenuSub,
+  DropdownMenuRadioGroup,
+};

package/src/index.ts

@@ -5,6 +5,7 @@ export * from './components/Button/Button';
 export * from './components/Card/Card';
 export * from './components/CheckboxInput/components/Checkbox';
 export * from './components/CheckboxInput/CheckboxInput';
+export * from './components/Collapsible/Collapsible';
 export * from './components/DateInput/DateInput';
 export * from './components/DatePicker/DatePicker';
 export * from './components/Details/Details';

package/src/styles/utilities.scss

@@ -7,3 +7,7 @@
 @import './text-align';
 @import './white-space';
 @import './position';
+
+.outline-none {
+    outline: none;
+}