@charcoal-ui/react 2.6.0 → 2.8.0

package/dist/components/DropdownSelector/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AAGA,OAAyB,EAEvB,qBAAqB,EACtB,MAAM,GAAG,CAAA;AACV,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAGzC,wBAGC;AAED,KAAK,KAAK,GAAG,IAAI,CACf,qBAAqB,EACrB,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,KAAK,CAehC,CAAA;AAUD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,qBAAqB,CAmBjD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,qBAAqB,CAe/C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAwB7C,CAAA;AAED,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAwBzC,CAAA;AAMD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,SAAS,GAAG,WAAW,CAAA;CAC9B,CAAA;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CA4BnD,CAAA;AAMD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAqBvC,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/DropdownSelector/index.story.tsx"],"names":[],"mappings":"AAGA,OAAyB,EAEvB,qBAAqB,EACtB,MAAM,GAAG,CAAA;AACV,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAGzC,wBAGC;AAED,KAAK,KAAK,GAAG,IAAI,CACf,qBAAqB,EACrB,UAAU,GAAG,UAAU,GAAG,cAAc,CACzC,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,KAAK,CAehC,CAAA;AAUD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,qBAAqB,CAoBjD,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,qBAAqB,CAgB/C,CAAA;AAED,eAAO,MAAM,IAAI,EAAE,KAAK,CAAC,qBAAqB,CAyB7C,CAAA;AAED,KAAK,aAAa,GAAG;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,aAAa,CAwBzC,CAAA;AAMD,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,SAAS,GAAG,WAAW,CAAA;CAC9B,CAAA;AACD,eAAO,MAAM,aAAa,EAAE,KAAK,CAAC,kBAAkB,CA4BnD,CAAA;AAMD,KAAK,YAAY,GAAG;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AACD,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAqBvC,CAAA"}

package/dist/components/LoadingSpinner/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAI1D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAS,EACT,OAAY,EACZ,WAAmB,GACpB;;;;CAAA,eAMA;AA8CD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,yFAmB7B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/LoadingSpinner/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAsC,MAAM,OAAO,CAAA;AAI1D,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,IAAS,EACT,OAAY,EACZ,WAAmB,GACpB;;;;CAAA,eAMA;AA+CD,UAAU,KAAK;IACb,IAAI,CAAC,EAAE,OAAO,CAAA;CACf;AAED,MAAM,WAAW,yBAAyB;IACxC,OAAO,IAAI,IAAI,CAAA;CAChB;AAED,eAAO,MAAM,kBAAkB,yFAmB7B,CAAA"}

package/dist/components/Modal/ModalPlumbing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ModalPlumbing.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"names":[],"mappings":"AAMA,wBAAgB,WAAW,gBAM1B;AAaD,eAAO,MAAM,UAAU,yGAMtB,CAAA;AAED,eAAO,MAAM,SAAS,yGAErB,CAAA;AAED,eAAO,MAAM,YAAY,yGASxB,CAAA"}
+{"version":3,"file":"ModalPlumbing.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalPlumbing.tsx"],"names":[],"mappings":"AAKA,wBAAgB,WAAW,gBAM1B;AAaD,eAAO,MAAM,UAAU,yGAEtB,CAAA;AAED,eAAO,MAAM,SAAS,yGAErB,CAAA;AAED,eAAO,MAAM,YAAY,yGAMxB,CAAA"}

package/dist/components/Modal/index.d.ts

@@ -2,12 +2,14 @@ import React from 'react';
 import { AriaModalOverlayProps } from '@react-aria/overlays';
 import { AriaDialogProps } from '@react-types/dialog';
 import { ButtonProps } from '../Button';
+type BottomSheet = boolean | 'full';
+type Size = 'S' | 'M' | 'L';
 export type ModalProps = AriaModalOverlayProps & AriaDialogProps & {
     children: React.ReactNode;
     zIndex?: number;
     title: string;
-    size?: 'S' | 'M' | 'L';
-    bottomSheet?: boolean | 'full';
+    size?: Size;
+    bottomSheet?: BottomSheet;
     isOpen: boolean;
     onClose: () => void;
     /**
@@ -43,4 +45,5 @@ export type ModalProps = AriaModalOverlayProps & AriaDialogProps & {
 export default function Modal({ children, zIndex, portalContainer, ...props }: ModalProps): JSX.Element;
 export declare function ModalTitle(props: React.HTMLAttributes<HTMLHeadingElement>): JSX.Element;
 export declare function ModalDismissButton({ children, ...props }: ButtonProps): JSX.Element | null;
+export {};
 //# sourceMappingURL=index.d.ts.map

package/dist/components/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,EACL,qBAAqB,EAItB,MAAM,sBAAsB,CAAA;AAK7B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAMrD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/C,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAC5C,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;IACtB,WAAW,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IAC9B,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;AAIH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,QAAQ,EACR,MAAwB,EACxB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,eA8FZ;AAgFD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,eAOzE;AAQD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,sBAYrE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6B,MAAM,OAAO,CAAA;AACjD,OAAO,EACL,qBAAqB,EAItB,MAAM,sBAAsB,CAAA;AAK7B,OAAO,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAMrD,OAAe,EAAE,WAAW,EAAE,MAAM,WAAW,CAAA;AAG/C,KAAK,WAAW,GAAG,OAAO,GAAG,MAAM,CAAA;AACnC,KAAK,IAAI,GAAG,GAAG,GAAG,GAAG,GAAG,GAAG,CAAA;AAE3B,MAAM,MAAM,UAAU,GAAG,qBAAqB,GAC5C,eAAe,GAAG;IAChB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,CAAC,EAAE,IAAI,CAAA;IACX,WAAW,CAAC,EAAE,WAAW,CAAA;IACzB,MAAM,EAAE,OAAO,CAAA;IACf,OAAO,EAAE,MAAM,IAAI,CAAA;IAEnB;;;OAGG;IACH,eAAe,CAAC,EAAE,WAAW,CAAA;CAC9B,CAAA;AAIH;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,QAAQ,EACR,MAAwB,EACxB,eAAe,EACf,GAAG,KAAK,EACT,EAAE,UAAU,eAgGZ;AA6FD,wBAAgB,UAAU,CAAC,KAAK,EAAE,KAAK,CAAC,cAAc,CAAC,kBAAkB,CAAC,eAOzE;AAQD,wBAAgB,kBAAkB,CAAC,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,WAAW,sBAYrE"}

package/dist/components/Radio/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,YAAoB,EACpB,QAAgB,EAChB,QAAQ,GACT,EAAE,UAAU,eAwCZ;AAYD,eAAO,MAAM,UAAU;;;;UA4CtB,CAAA;AAMD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AA+BF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,eA8BjB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Radio/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAkC,MAAM,OAAO,CAAA;AAMtD,MAAM,MAAM,UAAU,GAAG,KAAK,CAAC,iBAAiB,CAAC;IAC/C,KAAK,EAAE,MAAM,CAAA;IACb,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AAEF,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,YAAoB,EACpB,QAAgB,EAChB,QAAQ,GACT,EAAE,UAAU,eAwCZ;AAYD,eAAO,MAAM,UAAU;;;;UA+CtB,CAAA;AAMD,MAAM,MAAM,eAAe,GAAG,KAAK,CAAC,iBAAiB,CAAC;IACpD,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,EAAE,MAAM,CAAA;IACb,IAAI,EAAE,MAAM,CAAA;IACZ,QAAQ,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI,CAAA;IAC5B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAC,CAAA;AA+BF,wBAAgB,UAAU,CAAC,EACzB,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,QAAQ,GACT,EAAE,eAAe,eA8BjB"}

package/dist/components/SegmentedControl/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAchE,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAE9B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAEhD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAAA;;AAuCD,wBAAqC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA4C,MAAM,OAAO,CAAA;AAchE,KAAK,oBAAoB,GAAG;IAC1B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB,KAAK,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG;IAClC,QAAQ,CAAC,EAAE,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,IAAI,CAAC,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAC3B,QAAQ,CAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAE3B,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,CAAA;IACvB,QAAQ,CAAC,YAAY,CAAC,EAAE,MAAM,CAAA;IAE9B,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,GAAG,oBAAoB,EAAE,CAAA;IAEhD,QAAQ,CAAC,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;CAC5C,CAAA;;AAwCD,wBAAqC"}

package/dist/components/SegmentedControl/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAyB,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAEzC,wBAGC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA;AASD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/SegmentedControl/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAyB,EAAE,qBAAqB,EAAE,MAAM,GAAG,CAAA;AAC3D,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;AAEzC,wBAGC;AAED,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA;AAUD,eAAO,MAAM,cAAc,EAAE,KAAK,CAAC,qBAAqB,CAEvD,CAAA"}

package/dist/components/Switch/index.story.d.ts

@@ -9,6 +9,7 @@ interface Props {
     checked: boolean;
     disabled: boolean;
 }
+export declare const Playground: Story<Props>;
 export declare const Labelled: Story<Props>;
 export declare const Unlabelled: Story<Props>;
 //# sourceMappingURL=index.story.d.ts.map

package/dist/components/Switch/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,MAAM,MAAM,GAAG,CAAA;;;;;AAEtB,wBAGC;AAED,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,KAAK,CAMjC,CAAA;AAOD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CASnC,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/Switch/index.story.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AACzC,OAAO,MAAM,MAAM,GAAG,CAAA;;;;;AAEtB,wBAGC;AAED,UAAU,KAAK;IACb,OAAO,EAAE,OAAO,CAAA;IAChB,QAAQ,EAAE,OAAO,CAAA;CAClB;AAED,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CAiBnC,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,KAAK,CAMjC,CAAA;AAOD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,KAAK,CASnC,CAAA"}

package/dist/components/TagItem/index.d.ts

@@ -11,6 +11,7 @@ export type TagItemProps = {
     status?: 'default' | 'active' | 'inactive';
     size?: keyof typeof sizeMap;
     disabled?: boolean;
+    className?: string;
 } & Pick<ComponentPropsWithoutRef<'a'>, 'href' | 'target' | 'rel' | 'onClick'>;
 declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<{
     label: string;
@@ -20,6 +21,7 @@ declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponen
     status?: "default" | "active" | "inactive" | undefined;
     size?: "S" | "M" | undefined;
     disabled?: boolean | undefined;
+    className?: string | undefined;
 } & Pick<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href" | "rel" | "target" | "onClick"> & React.RefAttributes<HTMLAnchorElement>>>;
 export default _default;
 //# sourceMappingURL=index.d.ts.map

package/dist/components/TagItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,wBAAwB,EACzB,MAAM,OAAO,CAAA;AAQd,QAAA,MAAM,OAAO;;;CAGZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;CACnB,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;;;;;;;;;;AAuD9E,wBAA4B"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAIZ,wBAAwB,EACzB,MAAM,OAAO,CAAA;AAQd,QAAA,MAAM,OAAO;;;CAGZ,CAAA;AAED,MAAM,MAAM,YAAY,GAAG;IACzB,KAAK,EAAE,MAAM,CAAA;IACb,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,MAAM,CAAC,EAAE,SAAS,GAAG,QAAQ,GAAG,UAAU,CAAA;IAC1C,IAAI,CAAC,EAAE,MAAM,OAAO,OAAO,CAAA;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,IAAI,CAAC,wBAAwB,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,QAAQ,GAAG,KAAK,GAAG,SAAS,CAAC,CAAA;;;;;;;;;;;AAyD9E,wBAA4B"}

package/dist/components/TagItem/index.story.d.ts

@@ -11,6 +11,7 @@ declare const _default: {
         status?: "default" | "active" | "inactive" | undefined;
         size?: "S" | "M" | undefined;
         disabled?: boolean | undefined;
+        className?: string | undefined;
     } & Pick<Pick<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, "key" | "css" | keyof React.AnchorHTMLAttributes<HTMLAnchorElement>>, "href" | "rel" | "target" | "onClick"> & React.RefAttributes<HTMLAnchorElement>>>;
     argTypes: {
         bgColor: {

package/dist/components/TagItem/index.story.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAgB,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;AAEzC,wBAUC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAEvC,CAAA;AASD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,YAAY,CA4I1C,CAAA"}
+{"version":3,"file":"index.story.d.ts","sourceRoot":"","sources":["../../../src/components/TagItem/index.story.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAgB,EAAE,YAAY,EAAE,MAAM,GAAG,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;;;;;;;;;;;;;;;;;;;;;AAEzC,wBAUC;AAED,eAAO,MAAM,OAAO,EAAE,KAAK,CAAC,YAAY,CAEvC,CAAA;AAUD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,YAAY,CA4I1C,CAAA"}

package/dist/index.cjs.js

@@ -464,6 +464,9 @@ var RadioInput = import_styled_components6.default.input.attrs({ type: "radio" }
     }
 
     ${theme((o) => o.outline.default.focus)}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `;
 var RadioLabel = import_styled_components6.default.div`
@@ -751,6 +754,10 @@ var Label = import_styled_components8.default.label`
 
   ${theme((o) => o.disabled)}
 
+  :active > input {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
+
   ${import_utils4.disabledSelector} {
     cursor: default;
   }
@@ -765,42 +772,63 @@ var LabelInner = import_styled_components8.default.div`
 var SwitchInput = import_styled_components8.default.input.attrs({
   type: "checkbox"
 })`
-  &[type='checkbox'] {
-    appearance: none;
-    display: inline-flex;
-    position: relative;
-    box-sizing: border-box;
-    width: 28px;
-    border: 2px solid transparent;
-    transition: box-shadow 0.2s, background-color 0.2s;
-    cursor: inherit;
-    ${theme((o) => [
-  o.borderRadius(16),
-  o.height.px(16),
-  o.bg.text4.hover.press,
-  o.outline.default.focus,
-  o.margin.all(0)
-])}
+  appearance: none;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
 
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      top: 0;
-      left: 0;
-      width: 12px;
-      height: 12px;
-      transform: translateX(0);
-      transition: transform 0.2s;
-      ${theme((o) => [o.bg.text5.hover.press, o.borderRadius("oval")])}
-    }
+  transition-property: background-color, box-shadow;
+  transition-duration: 0.2s;
+  cursor: inherit;
 
-    &:checked {
-      ${theme((o) => o.bg.brand.hover.press)}
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+  :hover {
+    background-color: var(--charcoal-text4-hover);
+  }
+  :active {
+    background-color: var(--charcoal-text4-press);
+  }
+  :focus {
+    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+  }
 
-      &::after {
-        transform: translateX(12px);
-      }
+  &::after {
+    content: '';
+    position: absolute;
+    display: block;
+    top: 0;
+    left: 0;
+    width: 12px;
+    height: 12px;
+    transform: translateX(0);
+    transition: transform 0.2s;
+    border-radius: 1024px;
+    background-color: var(--charcoal-text5);
+    :hover {
+      background-color: var(--charcoal-text5-hover);
+    }
+    :active {
+      background-color: var(--charcoal-text5-press);
+    }
+  }
+
+  &:checked {
+    background-color: var(--charcoal-brand);
+    :hover {
+      background-color: var(--charcoal-brand-hover);
+    }
+    :active {
+      background-color: var(--charcoal-brand-press);
+    }
+    &::after {
+      transform: translateX(12px);
+      transition: transform 0.2s;
     }
   }
 `;
@@ -1158,6 +1186,13 @@ var StyledTextareaContainer = import_styled_components10.default.div`
   o.borderRadius(4)
 ])}
 
+  /**
+   * FIXME: o.outline.default を &:focus-within 内に書いてると、外れるときに transition が効かない
+   * 本来 o.outline.default.focus と書けば足してくれるような transition の内容を一旦明示している
+   * o.outline.default.focusWithin のようなものがあればこの行は不要になるはず
+   */
+  transition: box-shadow 0.2s;
+
   &:focus-within {
     ${(p) => theme3((o) => p.invalid ? o.outline.assertive : o.outline.default)}
   }
@@ -1316,7 +1351,7 @@ function Modal({
         ...underlayProps,
         style: transitionEnabled ? { backgroundColor } : {}
       },
-      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(
+      /* @__PURE__ */ import_react13.default.createElement(import_focus.FocusScope, { contain: true, restoreFocus: true, autoFocus: true }, /* @__PURE__ */ import_react13.default.createElement(DialogContainer, { bottomSheet, size }, /* @__PURE__ */ import_react13.default.createElement(
         ModalDialog,
         {
           ref,
@@ -1342,7 +1377,7 @@ function Modal({
             }
           )
         )
-      ))
+      )))
     ))
   );
 }
@@ -1354,6 +1389,8 @@ var ModalContext = import_react13.default.createContext({
 });
 var ModalBackground = (0, import_react_spring.animated)(import_styled_components11.default.div`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -1362,34 +1399,52 @@ var ModalBackground = (0, import_react_spring.animated)(import_styled_components
 
   ${theme((o) => [o.bg.surface4])}
 `);
+var DialogContainer = import_styled_components11.default.div`
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
+  width: ${(p) => {
+  switch (p.size) {
+    case "S": {
+      return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "M": {
+      return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    case "L": {
+      return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2;
+    }
+    default: {
+      return unreachable(p.size);
+    }
+  }
+}}px;
+
+  @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
+    width: calc(100% - 48px);
+    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+        margin: 0;
+        padding: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+        ${p.bottomSheet === "full" ? "height: 100%" : ""};
+      `}
+  }
+`;
 var ModalDialog = (0, import_react_spring.animated)(import_styled_components11.default.div`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: ${(p) => p.size === "S" ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "M" ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : p.size === "L" ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2 : unreachable(p.size)}px;
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-
   @media ${({ theme: theme4 }) => (0, import_utils5.maxWidth)(theme4.breakpoint.screen1)} {
-    ${(p) => p.bottomSheet === "full" ? import_styled_components11.css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-            height: 100%;
-          ` : p.bottomSheet ? import_styled_components11.css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-          ` : import_styled_components11.css`
-            width: calc(100% - 48px);
-          `}
+    ${(p) => p.bottomSheet !== false && import_styled_components11.css`
+        border-radius: 0;
+        ${p.bottomSheet === "full" && import_styled_components11.css`
+          height: 100%;
+        `}
+      `}
   }
 `);
 var ModalCrossButton = (0, import_styled_components11.default)(IconButton_default)`
@@ -1412,7 +1467,6 @@ var ModalHeading = import_styled_components11.default.h3`
 // src/components/Modal/ModalPlumbing.tsx
 var import_react14 = __toESM(require("react"));
 var import_styled_components12 = __toESM(require("styled-components"));
-var import_utils6 = require("@charcoal-ui/utils");
 function ModalHeader() {
   return /* @__PURE__ */ import_react14.default.createElement(ModalHeaderRoot, null, /* @__PURE__ */ import_react14.default.createElement(StyledModalTitle, null));
 }
@@ -1426,11 +1480,7 @@ var StyledModalTitle = (0, import_styled_components12.default)(ModalTitle)`
   ${theme((o) => [o.font.text1, o.typography(16).bold])}
 `;
 var ModalAlign = import_styled_components12.default.div`
-  ${theme((o) => [o.padding.horizontal(24)])}
-
-  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16)])}
 `;
 var ModalBody = import_styled_components12.default.div`
   ${theme((o) => [o.padding.bottom(40)])}
@@ -1439,11 +1489,8 @@ var ModalButtons = import_styled_components12.default.div`
   display: grid;
   grid-auto-flow: row;
   grid-row-gap: 8px;
-  ${theme((o) => [o.padding.horizontal(24).top(16)])}
 
-  @media ${({ theme: theme4 }) => (0, import_utils6.maxWidth)(theme4.breakpoint.screen1)} {
-    ${theme((o) => [o.padding.horizontal(16)])}
-  }
+  ${theme((o) => [o.padding.horizontal(16).top(16)])}
 `;
 
 // src/components/LoadingSpinner/index.tsx
@@ -1457,6 +1504,7 @@ function LoadingSpinner({
   return /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerRoot, { size, padding, transparent }, /* @__PURE__ */ import_react15.default.createElement(LoadingSpinnerIcon, null));
 }
 var LoadingSpinnerRoot = import_styled_components13.default.div.attrs({ role: "progressbar" })`
+  box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
   border-radius: 8px;
@@ -1511,7 +1559,7 @@ var LoadingSpinnerIcon = import_react15.default.forwardRef(function LoadingSpinn
 var import_react20 = __toESM(require("react"));
 var import_styled_components19 = __toESM(require("styled-components"));
 var import_react_stately2 = require("react-stately");
-var import_utils9 = require("@charcoal-ui/utils");
+var import_utils8 = require("@charcoal-ui/utils");
 var import_visually_hidden2 = require("@react-aria/visually-hidden");
 var import_select = require("@react-aria/select");
 var import_button = require("@react-aria/button");
@@ -1531,19 +1579,19 @@ var import_styled_components16 = __toESM(require("styled-components"));
 var import_react16 = __toESM(require("react"));
 var import_styled_components14 = __toESM(require("styled-components"));
 var import_listbox = require("@react-aria/listbox");
-var import_utils7 = require("@react-aria/utils");
+var import_utils6 = require("@react-aria/utils");
 var import_focus2 = require("@react-aria/focus");
-var import_utils8 = require("@charcoal-ui/utils");
+var import_utils7 = require("@charcoal-ui/utils");
 function Option({ item, state, mode }) {
   const ref = (0, import_react16.useRef)(null);
   const { optionProps, isSelected } = (0, import_listbox.useOption)(item, state, ref);
   const { focusProps } = (0, import_focus2.useFocusRing)();
-  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils7.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
+  return /* @__PURE__ */ import_react16.default.createElement(OptionRoot, { ...(0, import_utils6.mergeProps)(optionProps, focusProps), ref, mode }, /* @__PURE__ */ import_react16.default.createElement(OptionCheckIcon, { name: "16/Check", isSelected }), /* @__PURE__ */ import_react16.default.createElement(OptionText, null, item.rendered));
 }
 var OptionRoot = import_styled_components14.default.li`
   display: flex;
   align-items: center;
-  gap: ${({ theme: theme4 }) => (0, import_utils8.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils7.px)(theme4.spacing[4])};
   height: 40px;
   cursor: pointer;
   outline: none;
@@ -1777,7 +1825,7 @@ var DropdownSelectorRoot = import_styled_components19.default.div`
   display: inline-block;
   width: 100%;
 
-  ${import_utils9.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
     ${theme((o) => o.disabled)}
   }
@@ -1800,7 +1848,7 @@ var DropdownButton = import_styled_components19.default.button`
   box-sizing: border-box;
   cursor: pointer;
 
-  ${import_utils9.disabledSelector} {
+  ${import_utils8.disabledSelector} {
     cursor: default;
   }
 
@@ -1834,7 +1882,7 @@ var import_react22 = __toESM(require("react"));
 var import_react_stately3 = require("react-stately");
 var import_radio = require("@react-aria/radio");
 var import_styled_components20 = __toESM(require("styled-components"));
-var import_utils10 = require("@charcoal-ui/utils");
+var import_utils9 = require("@charcoal-ui/utils");
 
 // src/components/SegmentedControl/RadioGroupContext.tsx
 var import_react21 = __toESM(require("react"));
@@ -1860,7 +1908,8 @@ var SegmentedControl = (0, import_react22.forwardRef)(
         ...props,
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
-        isRequired: props.required
+        isRequired: props.required,
+        "aria-label": props.name
       }),
       [props]
     );
@@ -1918,7 +1967,7 @@ var SegmentedRoot = import_styled_components20.default.label`
   cursor: pointer;
   height: 32px;
 
-  ${import_utils10.disabledSelector} {
+  ${import_utils9.disabledSelector} {
     cursor: default;
   }
 
@@ -1958,9 +2007,9 @@ var SegmentedLabelInner = import_styled_components20.default.div`
 var import_react23 = __toESM(require("react"));
 var import_styled_components21 = __toESM(require("styled-components"));
 var import_checkbox = require("@react-aria/checkbox");
-var import_utils11 = require("@react-aria/utils");
+var import_utils10 = require("@react-aria/utils");
 var import_react_stately4 = require("react-stately");
-var import_utils12 = require("@charcoal-ui/utils");
+var import_utils11 = require("@charcoal-ui/utils");
 var Checkbox = (0, import_react23.forwardRef)(
   function CheckboxInner(props, ref) {
     const ariaCheckboxProps = (0, import_react23.useMemo)(
@@ -1974,7 +2023,7 @@ var Checkbox = (0, import_react23.forwardRef)(
       [props]
     );
     const state = (0, import_react_stately4.useToggleState)(ariaCheckboxProps);
-    const objectRef = (0, import_utils11.useObjectRef)(ref);
+    const objectRef = (0, import_utils10.useObjectRef)(ref);
     const { inputProps } = (0, import_checkbox.useCheckbox)(ariaCheckboxProps, state, objectRef);
     const isDisabled = (props.disabled ?? false) || (props.readonly ?? false);
     return /* @__PURE__ */ import_react23.default.createElement(InputRoot, { "aria-disabled": isDisabled }, /* @__PURE__ */ import_react23.default.createElement(CheckboxRoot, null, /* @__PURE__ */ import_react23.default.createElement(CheckboxInput, { type: "checkbox", ...inputProps }), /* @__PURE__ */ import_react23.default.createElement(CheckboxInputOverlay, { "aria-hidden": true, checked: inputProps.checked }, /* @__PURE__ */ import_react23.default.createElement(Icon_default, { name: "24/Check", unsafeNonGuidelineScale: 2 / 3 }))), "children" in props && /* @__PURE__ */ import_react23.default.createElement(InputLabel, null, props.children));
@@ -1989,11 +2038,11 @@ var InputRoot = import_styled_components21.default.label`
   display: flex;
 
   cursor: pointer;
-  ${import_utils12.disabledSelector} {
+  ${import_utils11.disabledSelector} {
     cursor: default;
   }
 
-  gap: ${({ theme: theme4 }) => (0, import_utils12.px)(theme4.spacing[4])};
+  gap: ${({ theme: theme4 }) => (0, import_utils11.px)(theme4.spacing[4])};
   ${theme((o) => [o.disabled])}
 `;
 var CheckboxRoot = import_styled_components21.default.div`
@@ -2017,6 +2066,9 @@ var CheckboxInput = import_styled_components21.default.input`
       border-color: ${({ theme: theme4 }) => theme4.color.text4};
     }
     ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+
+    /* FIXME: o.outline.default.focus の transition に o.bg.brand の transition が打ち消されてしまう */
+    transition: all 0.2s !important;
   }
 `;
 var CheckboxInputOverlay = import_styled_components21.default.div`
@@ -2042,9 +2094,9 @@ var InputLabel = import_styled_components21.default.div`
 
 // src/components/TagItem/index.tsx
 var import_react24 = __toESM(require("react"));
-var import_utils13 = require("@react-aria/utils");
+var import_utils12 = require("@react-aria/utils");
 var import_styled_components22 = __toESM(require("styled-components"));
-var import_utils14 = require("@charcoal-ui/utils");
+var import_utils13 = require("@charcoal-ui/utils");
 var import_button2 = require("@react-aria/button");
 var sizeMap = {
   S: 32,
@@ -2059,9 +2111,10 @@ var TagItem = (0, import_react24.forwardRef)(
     size = "M",
     disabled,
     status = "default",
+    className,
     ...props
   }, _ref) {
-    const ref = (0, import_utils13.useObjectRef)(_ref);
+    const ref = (0, import_utils12.useObjectRef)(_ref);
     const ariaButtonProps = (0, import_react24.useMemo)(
       () => ({
         elementType: "a",
@@ -2078,7 +2131,8 @@ var TagItem = (0, import_react24.forwardRef)(
         ref,
         size: hasTranslatedLabel ? "M" : size,
         status,
-        ...buttonProps
+        ...buttonProps,
+        className
       },
       /* @__PURE__ */ import_react24.default.createElement(Background, { bgColor, bgImage, status }),
       /* @__PURE__ */ import_react24.default.createElement(Inner, null, /* @__PURE__ */ import_react24.default.createElement(LabelWrapper, { isTranslate: hasTranslatedLabel }, hasTranslatedLabel && /* @__PURE__ */ import_react24.default.createElement(TranslatedLabel, null, /* @__PURE__ */ import_react24.default.createElement(Label3, null, translatedLabel)), /* @__PURE__ */ import_react24.default.createElement(Label3, null, label)), status === "active" && /* @__PURE__ */ import_react24.default.createElement(Icon_default, { name: "16/Remove" }))
@@ -2106,7 +2160,7 @@ var TagItemRoot = import_styled_components22.default.a`
   ...status === "active" ? [o.padding.left(16), o.padding.right(8)] : []
 ])}
 
-  ${import_utils14.disabledSelector} {
+  ${import_utils13.disabledSelector} {
     ${theme((o) => [o.disabled])}
     cursor: default;
   }
@@ -2140,7 +2194,7 @@ var Background = import_styled_components22.default.div`
 `;
 var Inner = import_styled_components22.default.div`
   display: inline-flex;
-  gap: ${({ theme: theme4 }) => (0, import_utils14.px)(theme4.spacing[8])};
+  gap: ${({ theme: theme4 }) => (0, import_utils13.px)(theme4.spacing[8])};
   align-items: center;
   z-index: 2;
 `;