@veeqo/ui 9.0.0-beta-3 → 9.0.0-beta-v2-1

package/dist/components/Accordion/Accordion.cjs

@@ -1,2 +1,54 @@
-"use strict";var e=require("react"),t=require("framer-motion"),a=require("./styled.cjs"),r=require("../../theme/modules/colors.cjs"),n=require("../../tempIcons/UpArrowIcon.cjs"),l=require("../Text/Text.cjs");function o(e){return e&&e.__esModule?e:{default:e}}var c=o(e);exports.Accordion=({className:o,children:i,label:u,iconSlot:m,glyphColor:d=r.colors.neutral.ink.lightest,timeout:s=350,description:f,shouldOpenOnMount:p,variant:E="default",summaryTextVariant:y="body"})=>{const[A,h]=e.useState(!!p),w=()=>h(!A),x={initial:{opacity:0},exit:{opacity:0},animate:{opacity:1},transition:{from:0,type:"tween",duration:s/1e3}};return"unstyled"===E?c.default.createElement(a.AccordionDetails,{open:!!p,className:o},c.default.createElement(a.UnstyledAccordionSummary,{onClick:w},c.default.createElement(a.Top,null,c.default.createElement(a.Left,{glyphColor:d},m,c.default.createElement(l.Text,{variant:y},u)),c.default.createElement(a.Right,null,c.default.createElement(t.motion.span,{animate:{rotate:A?180:0}},c.default.createElement(n.UpArrowIcon,{name:A?"downArrow":"upArrow"})))),!!f&&c.default.createElement(a.Description,{variant:"hintText"},f)),A&&c.default.createElement(a.UnstyledAccordionContent,{...x},i)):c.default.createElement(a.AccordionDetails,{open:!!p,className:o},c.default.createElement(a.AccordionSummary,{onClick:w},c.default.createElement(a.Top,null,c.default.createElement(a.Left,{glyphColor:d},m,c.default.createElement(l.Text,{variant:y},u)),c.default.createElement(a.Right,null,c.default.createElement(t.motion.span,{animate:{rotate:A?180:0}},c.default.createElement(n.UpArrowIcon,{name:A?"downArrow":"upArrow"})))),!!f&&c.default.createElement(a.Description,{variant:"hintText"},f)),A&&c.default.createElement(a.AccordionContent,{...x},i))};
+'use strict';
+
+var React = require('react');
+var framerMotion = require('framer-motion');
+var styled = require('./styled.cjs');
+var colors = require('../../theme/modules/colors.cjs');
+var UpArrowIcon = require('../../tempIcons/UpArrowIcon.cjs');
+var Text = require('../Text/Text.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.colors.neutral.ink.lightest, timeout = 350, description, shouldOpenOnMount, variant = 'default', summaryTextVariant = 'body', }) => {
+    const [shouldOpen, setShouldOpen] = React.useState(!!shouldOpenOnMount);
+    const handleOpen = () => setShouldOpen(!shouldOpen);
+    const FRAMER_MOTION_CONFIG = {
+        initial: { opacity: 0 },
+        exit: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { from: 0, type: 'tween', duration: timeout / 1000 },
+    };
+    if (variant === 'unstyled') {
+        return (React__default.default.createElement(styled.AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+            React__default.default.createElement(styled.UnstyledAccordionSummary, { onClick: handleOpen },
+                React__default.default.createElement(styled.Top, null,
+                    React__default.default.createElement(styled.Left, { glyphColor: glyphColor },
+                        iconSlot,
+                        React__default.default.createElement(Text.Text, { variant: summaryTextVariant }, label)),
+                    React__default.default.createElement(styled.Right, null,
+                        React__default.default.createElement(framerMotion.motion.span, { animate: {
+                                rotate: shouldOpen ? 180 : 0,
+                            } },
+                            React__default.default.createElement(UpArrowIcon.UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
+                !!description && React__default.default.createElement(styled.Description, { variant: "hintText" }, description)),
+            shouldOpen && (React__default.default.createElement(styled.UnstyledAccordionContent, { ...FRAMER_MOTION_CONFIG }, children))));
+    }
+    return (React__default.default.createElement(styled.AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+        React__default.default.createElement(styled.AccordionSummary, { onClick: handleOpen },
+            React__default.default.createElement(styled.Top, null,
+                React__default.default.createElement(styled.Left, { glyphColor: glyphColor },
+                    iconSlot,
+                    React__default.default.createElement(Text.Text, { variant: summaryTextVariant }, label)),
+                React__default.default.createElement(styled.Right, null,
+                    React__default.default.createElement(framerMotion.motion.span, { animate: {
+                            rotate: shouldOpen ? 180 : 0,
+                        } },
+                        React__default.default.createElement(UpArrowIcon.UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
+            !!description && React__default.default.createElement(styled.Description, { variant: "hintText" }, description)),
+        shouldOpen && React__default.default.createElement(styled.AccordionContent, { ...FRAMER_MOTION_CONFIG }, children)));
+};
+
+exports.Accordion = Accordion;
 //# sourceMappingURL=Accordion.cjs.map

package/dist/components/Accordion/Accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Accordion.cjs","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":[null],"names":["colors","useState","React","AccordionDetails","UnstyledAccordionSummary","Top","Left","Text","Right","motion","UpArrowIcon","Description","UnstyledAccordionContent","AccordionSummary","AccordionContent"],"mappings":"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"}

package/dist/components/Accordion/Accordion.d.ts

@@ -1,4 +1,3 @@
 import { FC } from 'react';
 import { AccordionProps } from './types';
 export declare const Accordion: FC<AccordionProps>;
-//# sourceMappingURL=Accordion.d.ts.map

package/dist/components/Accordion/Accordion.js

@@ -1,2 +1,48 @@
-import e,{useState as t}from"react";import{motion as r}from"framer-motion";import{AccordionDetails as n,UnstyledAccordionSummary as a,Top as o,Left as l,Right as m,Description as c,UnstyledAccordionContent as i,AccordionSummary as p,AccordionContent as s}from"./styled.js";import{colors as E}from"../../theme/modules/colors.js";import{UpArrowIcon as u}from"../../tempIcons/UpArrowIcon.js";import{Text as d}from"../Text/Text.js";const y=({className:y,children:f,label:h,iconSlot:w,glyphColor:x=E.neutral.ink.lightest,timeout:v=350,description:A,shouldOpenOnMount:C,variant:T="default",summaryTextVariant:g="body"})=>{const[j,k]=t(!!C),N=()=>k(!j),b={initial:{opacity:0},exit:{opacity:0},animate:{opacity:1},transition:{from:0,type:"tween",duration:v/1e3}};return"unstyled"===T?e.createElement(n,{open:!!C,className:y},e.createElement(a,{onClick:N},e.createElement(o,null,e.createElement(l,{glyphColor:x},w,e.createElement(d,{variant:g},h)),e.createElement(m,null,e.createElement(r.span,{animate:{rotate:j?180:0}},e.createElement(u,{name:j?"downArrow":"upArrow"})))),!!A&&e.createElement(c,{variant:"hintText"},A)),j&&e.createElement(i,{...b},f)):e.createElement(n,{open:!!C,className:y},e.createElement(p,{onClick:N},e.createElement(o,null,e.createElement(l,{glyphColor:x},w,e.createElement(d,{variant:g},h)),e.createElement(m,null,e.createElement(r.span,{animate:{rotate:j?180:0}},e.createElement(u,{name:j?"downArrow":"upArrow"})))),!!A&&e.createElement(c,{variant:"hintText"},A)),j&&e.createElement(s,{...b},f))};export{y as Accordion};
+import React, { useState } from 'react';
+import { motion } from 'framer-motion';
+import { AccordionDetails, UnstyledAccordionSummary, Top, Left, Right, Description, UnstyledAccordionContent, AccordionSummary, AccordionContent } from './styled.js';
+import { colors } from '../../theme/modules/colors.js';
+import { UpArrowIcon } from '../../tempIcons/UpArrowIcon.js';
+import { Text } from '../Text/Text.js';
+
+const Accordion = ({ className, children, label, iconSlot, glyphColor = colors.neutral.ink.lightest, timeout = 350, description, shouldOpenOnMount, variant = 'default', summaryTextVariant = 'body', }) => {
+    const [shouldOpen, setShouldOpen] = useState(!!shouldOpenOnMount);
+    const handleOpen = () => setShouldOpen(!shouldOpen);
+    const FRAMER_MOTION_CONFIG = {
+        initial: { opacity: 0 },
+        exit: { opacity: 0 },
+        animate: { opacity: 1 },
+        transition: { from: 0, type: 'tween', duration: timeout / 1000 },
+    };
+    if (variant === 'unstyled') {
+        return (React.createElement(AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+            React.createElement(UnstyledAccordionSummary, { onClick: handleOpen },
+                React.createElement(Top, null,
+                    React.createElement(Left, { glyphColor: glyphColor },
+                        iconSlot,
+                        React.createElement(Text, { variant: summaryTextVariant }, label)),
+                    React.createElement(Right, null,
+                        React.createElement(motion.span, { animate: {
+                                rotate: shouldOpen ? 180 : 0,
+                            } },
+                            React.createElement(UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
+                !!description && React.createElement(Description, { variant: "hintText" }, description)),
+            shouldOpen && (React.createElement(UnstyledAccordionContent, { ...FRAMER_MOTION_CONFIG }, children))));
+    }
+    return (React.createElement(AccordionDetails, { open: !!shouldOpenOnMount, className: className },
+        React.createElement(AccordionSummary, { onClick: handleOpen },
+            React.createElement(Top, null,
+                React.createElement(Left, { glyphColor: glyphColor },
+                    iconSlot,
+                    React.createElement(Text, { variant: summaryTextVariant }, label)),
+                React.createElement(Right, null,
+                    React.createElement(motion.span, { animate: {
+                            rotate: shouldOpen ? 180 : 0,
+                        } },
+                        React.createElement(UpArrowIcon, { name: shouldOpen ? 'downArrow' : 'upArrow' })))),
+            !!description && React.createElement(Description, { variant: "hintText" }, description)),
+        shouldOpen && React.createElement(AccordionContent, { ...FRAMER_MOTION_CONFIG }, children)));
+};
+
+export { Accordion };
 //# sourceMappingURL=Accordion.js.map

package/dist/components/Accordion/Accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"Accordion.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"Accordion.js","sources":["../../../src/components/Accordion/Accordion.tsx"],"sourcesContent":[null],"names":[],"mappings":"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"}

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

@@ -1,2 +1 @@
 export { Accordion } from './Accordion';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/Accordion/styled.cjs

@@ -1,58 +1,39 @@
-"use strict";var e=require("styled-components"),t=require("framer-motion"),o=require("../BaseContainer/BaseContainer.cjs"),r=require("../Text/Text.cjs"),s=require("../../theme/index.cjs"),n=require("../../theme/modules/sizes.cjs");function i(e){return e&&e.__esModule?e:{default:e}}var a=i(e);const l=a.default(o.BaseContainer)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`,d=a.default(l)`
-  svg {
-    margin-right: 12px;
-    height: ${n.sizes.base};
-    width: ${n.sizes.base};
+'use strict';
 
-    color: ${({glyphColor:e})=>e};
-  }
-`,u=a.default(l)`
-  justify-content: flex-end;
-  flex-grow: 2;
-`,c=a.default.summary`
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  border-radius: 4px;
-  user-select: none;
-  cursor: pointer;
+var styled = require('styled-components');
+var framerMotion = require('framer-motion');
+var BaseContainer = require('../BaseContainer/BaseContainer.cjs');
+var Text = require('../Text/Text.cjs');
+var index = require('../../theme/index.cjs');
+var sizes = require('../../theme/modules/sizes.cjs');
 
-  border: 1px solid ${s.theme.colors.neutral.grey.dark};
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  :focus {
-    outline: none;
-    box-shadow: 0 0 0 2px ${s.theme.colors.secondary.blue.light};
-  }
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  :active {
-    box-shadow: 0 0 0 2px ${s.theme.colors.secondary.blue.light};
-  }
-`,x=a.default(o.BaseContainer)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 16px;
-`,p=a.default(r.Text)`
-  margin-top: 8px;
-`,m=a.default(t.motion(o.BaseContainer))`
-  margin-top: 4px;
-  background: rgba(217, 235, 248, 0.5);
-  padding: 10px 26px;
-`,f=a.default.details`
-  summary {
-    list-style-type: none;
-    ::-webkit-details-marker {
-      display: none;
-    }
-  }
-`,g=a.default(t.motion(o.BaseContainer))``,h=a.default.summary`
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px ${s.theme.colors.secondary.blue.light};
-  }
-`;exports.Text=r.Text,exports.AccordionContent=m,exports.AccordionDetails=f,exports.AccordionSummary=c,exports.Description=p,exports.Left=d,exports.Right=u,exports.Top=x,exports.UnstyledAccordionContent=g,exports.UnstyledAccordionSummary=h;
+const TapBarChild = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--vb6lvt" }) `display:flex;flex-direction:row;align-items:center;`;
+const Left = styled__default.default(TapBarChild).withConfig({ displayName: "vui--Left", componentId: "vui--19b2coz" }) `svg{margin-right:12px;height:${sizes.sizes.base};width:${sizes.sizes.base};color:${({ glyphColor }) => glyphColor};}`;
+const Right = styled__default.default(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--13mhsyo" }) `justify-content:flex-end;flex-grow:2;`;
+/**
+ * Due to unique behaviour observed in Safari, we override the outline property when
+ * the accordion is focussed.
+ */
+const AccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1lgp9cv" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${index.theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+const Top = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--11peosj" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
+const Description = styled__default.default(Text.Text).withConfig({ displayName: "vui--Description", componentId: "vui--1e00qnt" }) `margin-top:8px;`;
+const AccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--2wgxvx" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
+const AccordionDetails = styled__default.default.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--1dg5oex" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
+const UnstyledAccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--15qdyaz" }) ``;
+const UnstyledAccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--1v24yw5" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+
+exports.Text = Text.Text;
+exports.AccordionContent = AccordionContent;
+exports.AccordionDetails = AccordionDetails;
+exports.AccordionSummary = AccordionSummary;
+exports.Description = Description;
+exports.Left = Left;
+exports.Right = Right;
+exports.Top = Top;
+exports.UnstyledAccordionContent = UnstyledAccordionContent;
+exports.UnstyledAccordionSummary = UnstyledAccordionSummary;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Accordion/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":[null],"names":["TapBarChild","styled","BaseContainer","Left"],"mappings":"qSA6BA,MAAAA,EAAAC,EAAAA,QAAAC,EAAAA,cAAA;;;;EAwBAC,EAAAF,EAAAA,QAASD,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":[null],"names":["styled","BaseContainer","sizes","theme","Text","motion"],"mappings":";;;;;;;;;;;;;AAQA,MAAM,WAAW,GAAGA,uBAAM,CAACC,2BAAa,CAAC,kIAIxC;AAEK,MAAA,IAAI,GAAGD,uBAAM,CAAC,WAAW,CAAC,CAGlB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,6BAAA,EAAAE,WAAK,CAAC,IAAI,CACX,OAAA,EAAAA,WAAK,CAAC,IAAI,CAAA,OAAA,EAEV,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA,EAAA;AAI3C,MAAM,KAAK,GAAGF,uBAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAGA,uBAAM,CAAC,OAAO,yMAQjBG,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAGH,uBAAM,CAACC,2BAAa,CAAC;AAOjC,MAAM,WAAW,GAAGD,uBAAM,CAACI,SAAI,CAAC;AAI1B,MAAA,gBAAgB,GAAGJ,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAGD,uBAAM,CAAC,OAAO;AASjC,MAAA,wBAAwB,GAAGA,uBAAM,CAACK,mBAAM,CAACJ,2BAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAGD,uBAAM,CAAC,OAAO,wIAGnBG,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;"}

package/dist/components/Accordion/styled.d.ts

@@ -34,4 +34,3 @@ declare const UnstyledAccordionContent: import("styled-components").StyledCompon
 }>, any, {}, never>;
 declare const UnstyledAccordionSummary: import("styled-components").StyledComponent<"summary", any, {}, never>;
 export { AccordionSummary, Top, Text, Left, Right, Description, AccordionDetails, AccordionContent, UnstyledAccordionContent, UnstyledAccordionSummary, };
-//# sourceMappingURL=styled.d.ts.map

package/dist/components/Accordion/styled.js

@@ -1,58 +1,24 @@
-import e from"styled-components";import{motion as o}from"framer-motion";import{BaseContainer as r}from"../BaseContainer/BaseContainer.js";import{Text as i}from"../Text/Text.js";import{theme as t}from"../../theme/index.js";import{sizes as s}from"../../theme/modules/sizes.js";const n=e(r)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-`,l=e(n)`
-  svg {
-    margin-right: 12px;
-    height: ${s.base};
-    width: ${s.base};
+import styled from 'styled-components';
+import { motion } from 'framer-motion';
+import { BaseContainer } from '../BaseContainer/BaseContainer.js';
+import { Text } from '../Text/Text.js';
+import { theme } from '../../theme/index.js';
+import { sizes } from '../../theme/modules/sizes.js';
 
-    color: ${({glyphColor:e})=>e};
-  }
-`,a=e(n)`
-  justify-content: flex-end;
-  flex-grow: 2;
-`,m=e.summary`
-  display: flex;
-  flex-direction: column;
-  padding: 12px;
-  border-radius: 4px;
-  user-select: none;
-  cursor: pointer;
+const TapBarChild = styled(BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--vb6lvt" }) `display:flex;flex-direction:row;align-items:center;`;
+const Left = styled(TapBarChild).withConfig({ displayName: "vui--Left", componentId: "vui--19b2coz" }) `svg{margin-right:12px;height:${sizes.base};width:${sizes.base};color:${({ glyphColor }) => glyphColor};}`;
+const Right = styled(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--13mhsyo" }) `justify-content:flex-end;flex-grow:2;`;
+/**
+ * Due to unique behaviour observed in Safari, we override the outline property when
+ * the accordion is focussed.
+ */
+const AccordionSummary = styled.summary.withConfig({ displayName: "vui--AccordionSummary", componentId: "vui--1lgp9cv" }) `display:flex;flex-direction:column;padding:12px;border-radius:4px;user-select:none;cursor:pointer;border:1px solid ${theme.colors.neutral.grey.dark};:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}:active{box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
+const Top = styled(BaseContainer).withConfig({ displayName: "vui--Top", componentId: "vui--11peosj" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
+const Description = styled(Text).withConfig({ displayName: "vui--Description", componentId: "vui--1e00qnt" }) `margin-top:8px;`;
+const AccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--2wgxvx" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
+const AccordionDetails = styled.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--1dg5oex" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
+const UnstyledAccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--15qdyaz" }) ``;
+const UnstyledAccordionSummary = styled.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--1v24yw5" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
 
-  border: 1px solid ${t.colors.neutral.grey.dark};
-
-  :focus {
-    outline: none;
-    box-shadow: 0 0 0 2px ${t.colors.secondary.blue.light};
-  }
-
-  :active {
-    box-shadow: 0 0 0 2px ${t.colors.secondary.blue.light};
-  }
-`,p=e(r)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  height: 16px;
-`,d=e(i)`
-  margin-top: 8px;
-`,x=e(o(r))`
-  margin-top: 4px;
-  background: rgba(217, 235, 248, 0.5);
-  padding: 10px 26px;
-`,c=e.details`
-  summary {
-    list-style-type: none;
-    ::-webkit-details-marker {
-      display: none;
-    }
-  }
-`,g=e(o(r))``,f=e.summary`
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px ${t.colors.secondary.blue.light};
-  }
-`;export{x as AccordionContent,c as AccordionDetails,m as AccordionSummary,d as Description,l as Left,a as Right,i as Text,p as Top,g as UnstyledAccordionContent,f as UnstyledAccordionSummary};
+export { AccordionContent, AccordionDetails, AccordionSummary, Description, Left, Right, Text, Top, UnstyledAccordionContent, UnstyledAccordionSummary };
 //# sourceMappingURL=styled.js.map

package/dist/components/Accordion/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":[null],"names":["TapBarChild","styled","BaseContainer","Left"],"mappings":"mRA6BA,MAAAA,EAAAC,EAAAC,EAAA;;;;EAwBAC,EAAAF,EAASD,EAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAQA,MAAM,WAAW,GAAG,MAAM,CAAC,aAAa,CAAC,kIAIxC;AAEK,MAAA,IAAI,GAAG,MAAM,CAAC,WAAW,CAAC,CAGlB,UAAA,CAAA,EAAA,WAAA,EAAA,WAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,6BAAA,EAAA,KAAK,CAAC,IAAI,CACX,OAAA,EAAA,KAAK,CAAC,IAAI,CAAA,OAAA,EAEV,CAAC,EAAE,UAAU,EAAE,KAAK,UAAU,CAAA,EAAA;AAI3C,MAAM,KAAK,GAAG,MAAM,CAAC,WAAkB,CAAC;AAKxC;;;AAGG;AACH,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO,yMAQjB,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI,6CAIxB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,kCAIjC,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;AAI7D,MAAM,GAAG,GAAG,MAAM,CAAC,aAAa,CAAC;AAOjC,MAAM,WAAW,GAAG,MAAM,CAAC,IAAI,CAAC;AAI1B,MAAA,gBAAgB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,uBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,qEAAA;AAMtD,MAAM,gBAAgB,GAAG,MAAM,CAAC,OAAO;AASjC,MAAA,wBAAwB,GAAG,MAAM,CAAC,MAAM,CAAC,aAAa,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,+BAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAG,MAAM,CAAC,OAAO,wIAGnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}

package/dist/components/Accordion/types.d.ts

@@ -13,4 +13,3 @@ export type AccordionProps = {
     summaryTextVariant?: TextVariant;
 };
 export type AccordianVariants = 'default' | 'unstyled';
-//# sourceMappingURL=types.d.ts.map

package/dist/components/ActionMenu/ActionMenu.cjs

@@ -1,2 +1,36 @@
-"use strict";var e=require("react"),t=require("react-aria-components"),r=require("../Dropdown/Dropdown.cjs");require("../../hooks/useFocusVisible.cjs");var o=require("../../hooks/useId.cjs"),n=require("./styled.cjs");function i(e){return e&&e.__esModule?e:{default:e}}var u=i(e);const s=({id:i,menuLabel:s,ctaProps:a,actions:d,children:c})=>{var l;const[p,h]=e.useState(!1),m=o.useId({id:i,prefix:"action-menu"});return u.default.createElement(r.Dropdown,{id:m,style:{padding:"0"},shouldShow:p,setShouldShow:h,ctaProps:{size:"sm",...a},useAnchorWidth:!0,onKeyDown:e=>{"Escape"!==e.code&&"Tab"!==e.code||h(!1),e.preventDefault()}},u.default.createElement(t.Menu,{onClose:()=>h(!1),"aria-label":s||(null===(l=a.children)||void 0===l?void 0:l.toString())},null==d?void 0:d.map((e=>{var t;return u.default.createElement(n.MenuItem,{...e,key:e.id||(null===(t=e.children)||void 0===t?void 0:t.toString())})})),c))};s.Item=n.MenuItem,s.Section=n.Section,s.Text=t.Text,exports.ActionMenu=s;
+'use strict';
+
+var React = require('react');
+var reactAriaComponents = require('react-aria-components');
+var Dropdown = require('../Dropdown/Dropdown.cjs');
+require('../../hooks/useFocusVisible.cjs');
+var useId = require('../../hooks/useId.cjs');
+var styled = require('./styled.cjs');
+
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+
+const ActionMenu = ({ id, menuLabel, ctaProps, actions, children }) => {
+    var _a;
+    const [shouldShow, setShouldShow] = React.useState(false);
+    const idComputed = useId.useId({ id, prefix: 'action-menu' });
+    const onKeyDown = (e) => {
+        if (e.code === 'Escape' || e.code === 'Tab')
+            setShouldShow(false);
+        e.preventDefault();
+    };
+    return (React__default.default.createElement(Dropdown.Dropdown, { id: idComputed, style: { padding: '0' }, shouldShow: shouldShow, setShouldShow: setShouldShow, ctaProps: { size: 'sm', ...ctaProps }, useAnchorWidth: true, onKeyDown: onKeyDown },
+        React__default.default.createElement(reactAriaComponents.Menu, { onClose: () => setShouldShow(false), "aria-label": menuLabel || ((_a = ctaProps.children) === null || _a === undefined ? undefined : _a.toString()) }, actions === null || actions === undefined ? undefined :
+            actions.map((action) => {
+                var _a;
+                return (React__default.default.createElement(styled.MenuItem, { ...action, key: action.id || ((_a = action.children) === null || _a === undefined ? undefined : _a.toString()) }));
+            }),
+            children)));
+};
+ActionMenu.Item = styled.MenuItem;
+ActionMenu.Section = styled.Section;
+ActionMenu.Text = reactAriaComponents.Text;
+
+exports.ActionMenu = ActionMenu;
 //# sourceMappingURL=ActionMenu.cjs.map

package/dist/components/ActionMenu/ActionMenu.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.cjs","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":[null],"names":["ActionMenu","id","menuLabel","ctaProps","actions","children","_a","shouldShow","useState","idComputed","useId","prefix","e","code","React","createElement","Menu","onClose","setShouldShow","toString"],"mappings":"uRASW,MAAAA,EAAU,EAAAC,KAAAC,YAAAC,WAAAC,UAAAC,eACnB,IAAAC,EACA,MAAQC,KAAcC,EAAAA,UAAA,GACdC,EAAGC,EAAAA,MAAU,CAAAT,KAAAU,OAAA,uKACrBC,IAEqB,WAAvBA,EAAAC,MAAuB,QAAAD,EAAAC,iCA+BrBC,EAAAA,QAAAC,cAAAC,EAAAA,KAAA,CAAAC,QAAA,IAAAC,GAAA,GAAA,aAAAhB,IAAA,QAAAI,EAAAH,EAAAE,gBAAA,IAAAC,OAAA,EAAAA,EAAAa,aAAAf,aAAA"}
+{"version":3,"file":"ActionMenu.cjs","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":[null],"names":["useState","useId","React","Dropdown","Menu","MenuItem","Section","Text"],"mappings":";;;;;;;;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAmB,KAAI;;IAC5F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAGA,cAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,UAAU,GAAGC,WAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AAEvD,IAAA,MAAM,SAAS,GAAkD,CAAC,CAAC,KAAI;QACrE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK;YAAE,aAAa,CAAC,KAAK,CAAC;QACjE,CAAC,CAAC,cAAc,EAAE;AACpB,KAAC;AAED,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,iBAAQ,EACP,EAAA,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,EACrC,cAAc,EACd,IAAA,EAAA,SAAS,EAAE,SAAS,EAAA;QAEpBD,sBAAC,CAAA,aAAA,CAAAE,wBAAI,EACH,EAAA,OAAO,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC,EAAA,YAAA,EACvB,SAAS,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAErD,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,SAAA,GAAA,SAAA;AAAP,YAAA,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,KAAI;;gBAAC,QACxBF,qCAACG,eAAQ,EAAA,EAAA,GAAK,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,KAAI,CAAA,EAAA,GAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAI,CAAA;aACxE,CAAC;YAED,QAAQ,CACJ,CACE;AAEf;AAEA,UAAU,CAAC,IAAI,GAAGA,eAAQ;AAC1B,UAAU,CAAC,OAAO,GAAGC,cAAO;AAC5B,UAAU,CAAC,IAAI,GAAGC,wBAAI;;;;"}

package/dist/components/ActionMenu/ActionMenu.d.ts

@@ -10,8 +10,7 @@ export type ActionMenuProps = {
 };
 export declare const ActionMenu: {
     ({ id, menuLabel, ctaProps, actions, children }: ActionMenuProps): React.JSX.Element;
-    Item: import("styled-components").StyledComponent<(<T extends object>(props: MenuItemProps<T> & React.RefAttributes<T>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null), any, {}, never>;
-    Section: import("styled-components").StyledComponent<(<T_1 extends object>(props: import("react-aria-components").SectionProps<T_1> & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null), any, {}, never>;
+    Item: import("styled-components").StyledComponent<(<T extends object>(props: MenuItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>), any, {}, never>;
+    Section: import("styled-components").StyledComponent<(<T_1 extends object>(props: import("react-aria-components").SectionProps<T_1> & React.RefAttributes<HTMLElement>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>), any, {}, never>;
     Text: React.ForwardRefExoticComponent<import("react-aria-components").TextProps & React.RefAttributes<HTMLElement>>;
 };
-//# sourceMappingURL=ActionMenu.d.ts.map

package/dist/components/ActionMenu/ActionMenu.js

@@ -1,2 +1,30 @@
-import o,{useState as e}from"react";import{Menu as r,Text as t}from"react-aria-components";import{Dropdown as i}from"../Dropdown/Dropdown.js";import"../../hooks/useFocusVisible.js";import{useId as n}from"../../hooks/useId.js";import{MenuItem as s,Section as d}from"./styled.js";const a=({id:t,menuLabel:d,ctaProps:a,actions:l,children:c})=>{var m;const[p,u]=e(!1),h=n({id:t,prefix:"action-menu"});return o.createElement(i,{id:h,style:{padding:"0"},shouldShow:p,setShouldShow:u,ctaProps:{size:"sm",...a},useAnchorWidth:!0,onKeyDown:o=>{"Escape"!==o.code&&"Tab"!==o.code||u(!1),o.preventDefault()}},o.createElement(r,{onClose:()=>u(!1),"aria-label":d||(null===(m=a.children)||void 0===m?void 0:m.toString())},null==l?void 0:l.map((e=>{var r;return o.createElement(s,{...e,key:e.id||(null===(r=e.children)||void 0===r?void 0:r.toString())})})),c))};a.Item=s,a.Section=d,a.Text=t;export{a as ActionMenu};
+import React, { useState } from 'react';
+import { Menu, Text } from 'react-aria-components';
+import { Dropdown } from '../Dropdown/Dropdown.js';
+import '../../hooks/useFocusVisible.js';
+import { useId } from '../../hooks/useId.js';
+import { MenuItem, Section } from './styled.js';
+
+const ActionMenu = ({ id, menuLabel, ctaProps, actions, children }) => {
+    var _a;
+    const [shouldShow, setShouldShow] = useState(false);
+    const idComputed = useId({ id, prefix: 'action-menu' });
+    const onKeyDown = (e) => {
+        if (e.code === 'Escape' || e.code === 'Tab')
+            setShouldShow(false);
+        e.preventDefault();
+    };
+    return (React.createElement(Dropdown, { id: idComputed, style: { padding: '0' }, shouldShow: shouldShow, setShouldShow: setShouldShow, ctaProps: { size: 'sm', ...ctaProps }, useAnchorWidth: true, onKeyDown: onKeyDown },
+        React.createElement(Menu, { onClose: () => setShouldShow(false), "aria-label": menuLabel || ((_a = ctaProps.children) === null || _a === undefined ? undefined : _a.toString()) }, actions === null || actions === undefined ? undefined :
+            actions.map((action) => {
+                var _a;
+                return (React.createElement(MenuItem, { ...action, key: action.id || ((_a = action.children) === null || _a === undefined ? undefined : _a.toString()) }));
+            }),
+            children)));
+};
+ActionMenu.Item = MenuItem;
+ActionMenu.Section = Section;
+ActionMenu.Text = Text;
+
+export { ActionMenu };
 //# sourceMappingURL=ActionMenu.js.map

package/dist/components/ActionMenu/ActionMenu.js.map

@@ -1 +1 @@
-{"version":3,"file":"ActionMenu.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":[null],"names":["ActionMenu","id","menuLabel","ctaProps","actions","children","_a","shouldShow","useState","idComputed","useId","prefix","e","code","React","createElement","Menu","onClose","setShouldShow","toString"],"mappings":"sRASW,MAAAA,EAAU,EAAAC,KAAAC,YAAAC,WAAAC,UAAAC,eACnB,IAAAC,EACA,MAAQC,KAAcC,GAAA,GACdC,EAAGC,EAAU,CAAAT,KAAAU,OAAA,sJACrBC,IAEqB,WAAvBA,EAAAC,MAAuB,QAAAD,EAAAC,iCA+BrBC,EAAAC,cAAAC,EAAA,CAAAC,QAAA,IAAAC,GAAA,GAAA,aAAAhB,IAAA,QAAAI,EAAAH,EAAAE,gBAAA,IAAAC,OAAA,EAAAA,EAAAa,aAAAf,aAAA"}
+{"version":3,"file":"ActionMenu.js","sources":["../../../src/components/ActionMenu/ActionMenu.tsx"],"sourcesContent":[null],"names":[],"mappings":";;;;;;;AAea,MAAA,UAAU,GAAG,CAAC,EAAE,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAmB,KAAI;;IAC5F,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC;AACnD,IAAA,MAAM,UAAU,GAAG,KAAK,CAAC,EAAE,EAAE,EAAE,MAAM,EAAE,aAAa,EAAE,CAAC;AAEvD,IAAA,MAAM,SAAS,GAAkD,CAAC,CAAC,KAAI;QACrE,IAAI,CAAC,CAAC,IAAI,KAAK,QAAQ,IAAI,CAAC,CAAC,IAAI,KAAK,KAAK;YAAE,aAAa,CAAC,KAAK,CAAC;QACjE,CAAC,CAAC,cAAc,EAAE;AACpB,KAAC;AAED,IAAA,QACE,KAAC,CAAA,aAAA,CAAA,QAAQ,EACP,EAAA,EAAE,EAAE,UAAU,EACd,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,EACvB,UAAU,EAAE,UAAU,EACtB,aAAa,EAAE,aAAa,EAC5B,QAAQ,EAAE,EAAE,IAAI,EAAE,IAAI,EAAE,GAAG,QAAQ,EAAE,EACrC,cAAc,EACd,IAAA,EAAA,SAAS,EAAE,SAAS,EAAA;QAEpB,KAAC,CAAA,aAAA,CAAA,IAAI,EACH,EAAA,OAAO,EAAE,MAAM,aAAa,CAAC,KAAK,CAAC,EAAA,YAAA,EACvB,SAAS,KAAI,CAAA,EAAA,GAAA,QAAQ,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAA,EAErD,OAAO,KAAA,IAAA,IAAP,OAAO,KAAA,SAAA,GAAA,SAAA;AAAP,YAAA,OAAO,CAAE,GAAG,CAAC,CAAC,MAAM,KAAI;;gBAAC,QACxB,oBAAC,QAAQ,EAAA,EAAA,GAAK,MAAM,EAAE,GAAG,EAAE,MAAM,CAAC,EAAE,KAAI,CAAA,EAAA,GAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,EAAE,CAAA,EAAI,CAAA;aACxE,CAAC;YAED,QAAQ,CACJ,CACE;AAEf;AAEA,UAAU,CAAC,IAAI,GAAG,QAAQ;AAC1B,UAAU,CAAC,OAAO,GAAG,OAAO;AAC5B,UAAU,CAAC,IAAI,GAAG,IAAI;;;;"}

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

@@ -1,2 +1 @@
 export { ActionMenu } from './ActionMenu';
-//# sourceMappingURL=index.d.ts.map

package/dist/components/ActionMenu/styled.cjs

@@ -1,52 +1,17 @@
-"use strict";var e=require("react-aria-components"),t=require("styled-components"),r=require("../../theme/index.cjs"),o=require("../../theme/utils.cjs");function s(e){return e&&e.__esModule?e:{default:e}}var a=s(t);const i=a.default(e.MenuItem)`
-  display: grid;
-  grid-template-areas:
-    'label'
-    'description';
+'use strict';
 
-  cursor: pointer;
-  margin: ${r.theme.sizes.xs};
-  padding: ${r.theme.sizes.sm};
-  border-radius: ${r.theme.radius.base};
-  outline: 0;
+var reactAriaComponents = require('react-aria-components');
+var styled = require('styled-components');
+var index = require('../../theme/index.cjs');
+var utils = require('../../theme/utils.cjs');
 
-  &:is(a) {
-    ${o.getTextStyles(r.theme.text.link)}
-  }
-  &:is(div) {
-    ${o.getTextStyles(r.theme.text.body)}
-  }
+function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
-  white-space: nowrap;
+var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-  &[data-focused] {
-    color: ${r.theme.colors.secondary.blue.base};
-    box-shadow: 0 0 0 4px ${r.theme.colors.secondary.blue.light};
-  }
-  &[data-hovered] {
-    background-color: ${r.theme.colors.neutral.grey.light};
-  }
+const MenuItem = styled__default.default(reactAriaComponents.MenuItem).withConfig({ displayName: "vui--MenuItem", componentId: "vui--107kdhy" }) `display:grid;grid-template-areas:'label''description';cursor:pointer;margin:${index.theme.sizes.xs};padding:${index.theme.sizes.sm};border-radius:${index.theme.radius.base};outline:0;&:is(a){${utils.getTextStyles(index.theme.text.link)}}&:is(div){${utils.getTextStyles(index.theme.text.body)}}white-space:nowrap;&[data-focused]{color:${index.theme.colors.secondary.blue.base};box-shadow:0 0 0 4px ${index.theme.colors.secondary.blue.light};}&[data-hovered]{background-color:${index.theme.colors.neutral.grey.light};}&[data-disabled]{cursor:not-allowed;background-color:${index.theme.colors.neutral.grey.lightest};color:${index.theme.colors.neutral.ink.light};}[slot='label']{grid-area:label;}[slot='description']{grid-area:description;color:${index.theme.colors.neutral.ink.light};font-size:12px;}`;
+const Section = styled__default.default(reactAriaComponents.Section).withConfig({ displayName: "vui--Section", componentId: "vui--z4sp4" }) `&:not(:first-child){margin-top:0.5rem;border-top:1px solid ${index.theme.colors.neutral.grey.base};padding-top:0.5rem;}`;
 
-  &[data-disabled] {
-    cursor: not-allowed;
-    background-color: ${r.theme.colors.neutral.grey.lightest};
-    color: ${r.theme.colors.neutral.ink.light};
-  }
-
-  [slot='label'] {
-    grid-area: label;
-  }
-
-  [slot='description'] {
-    grid-area: description;
-    color: ${r.theme.colors.neutral.ink.light};
-    font-size: 12px;
-  }
-`,l=a.default(e.Section)`
-  &:not(:first-child) {
-    margin-top: 0.5rem;
-    border-top: 1px solid ${r.theme.colors.neutral.grey.base};
-    padding-top: 0.5rem;
-  }
-`;exports.MenuItem=i,exports.Section=l;
+exports.MenuItem = MenuItem;
+exports.Section = Section;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/ActionMenu/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ActionMenu/styled.ts"],"sourcesContent":[null],"names":["styled","AriaMenuItem","theme","getTextStyles","AriaSection"],"mappings":";;;;;;;;;;;MAKa,QAAQ,GAAGA,uBAAM,CAACC,4BAAY,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4EAAA,EAOhCC,WAAK,CAAC,KAAK,CAAC,EAAE,CACb,SAAA,EAAAA,WAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACRA,WAAK,CAAC,MAAM,CAAC,IAAI,CAI9B,mBAAA,EAAAC,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,WAAA,EAG9BC,mBAAa,CAACD,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,0CAAA,EAMvBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACjBA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,mCAAA,EAGrCA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAK/BA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAC7C,OAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAS9B,mFAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iBAAA;AAK9B,MAAA,OAAO,GAAGF,uBAAM,CAACI,2BAAW,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAGdF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;;"}

package/dist/components/ActionMenu/styled.d.ts

@@ -1,4 +1,3 @@
 /// <reference types="react" />
-export declare const MenuItem: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").MenuItemProps<T> & import("react").RefAttributes<T>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), any, {}, never>;
-export declare const Section: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").SectionProps<T> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null), any, {}, never>;
-//# sourceMappingURL=styled.d.ts.map
+export declare const MenuItem: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").MenuItemProps<T> & import("react").RefAttributes<HTMLDivElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;
+export declare const Section: import("styled-components").StyledComponent<(<T extends object>(props: import("react-aria-components").SectionProps<T> & import("react").RefAttributes<HTMLElement>) => import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>), any, {}, never>;

package/dist/components/ActionMenu/styled.js

@@ -1,52 +1,10 @@
-import{MenuItem as o,Section as r}from"react-aria-components";import e from"styled-components";import{theme as t}from"../../theme/index.js";import{getTextStyles as s}from"../../theme/utils.js";const a=e(o)`
-  display: grid;
-  grid-template-areas:
-    'label'
-    'description';
+import { MenuItem as MenuItem$1, Section as Section$1 } from 'react-aria-components';
+import styled from 'styled-components';
+import { theme } from '../../theme/index.js';
+import { getTextStyles } from '../../theme/utils.js';
 
-  cursor: pointer;
-  margin: ${t.sizes.xs};
-  padding: ${t.sizes.sm};
-  border-radius: ${t.radius.base};
-  outline: 0;
+const MenuItem = styled(MenuItem$1).withConfig({ displayName: "vui--MenuItem", componentId: "vui--107kdhy" }) `display:grid;grid-template-areas:'label''description';cursor:pointer;margin:${theme.sizes.xs};padding:${theme.sizes.sm};border-radius:${theme.radius.base};outline:0;&:is(a){${getTextStyles(theme.text.link)}}&:is(div){${getTextStyles(theme.text.body)}}white-space:nowrap;&[data-focused]{color:${theme.colors.secondary.blue.base};box-shadow:0 0 0 4px ${theme.colors.secondary.blue.light};}&[data-hovered]{background-color:${theme.colors.neutral.grey.light};}&[data-disabled]{cursor:not-allowed;background-color:${theme.colors.neutral.grey.lightest};color:${theme.colors.neutral.ink.light};}[slot='label']{grid-area:label;}[slot='description']{grid-area:description;color:${theme.colors.neutral.ink.light};font-size:12px;}`;
+const Section = styled(Section$1).withConfig({ displayName: "vui--Section", componentId: "vui--z4sp4" }) `&:not(:first-child){margin-top:0.5rem;border-top:1px solid ${theme.colors.neutral.grey.base};padding-top:0.5rem;}`;
 
-  &:is(a) {
-    ${s(t.text.link)}
-  }
-  &:is(div) {
-    ${s(t.text.body)}
-  }
-
-  white-space: nowrap;
-
-  &[data-focused] {
-    color: ${t.colors.secondary.blue.base};
-    box-shadow: 0 0 0 4px ${t.colors.secondary.blue.light};
-  }
-  &[data-hovered] {
-    background-color: ${t.colors.neutral.grey.light};
-  }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    background-color: ${t.colors.neutral.grey.lightest};
-    color: ${t.colors.neutral.ink.light};
-  }
-
-  [slot='label'] {
-    grid-area: label;
-  }
-
-  [slot='description'] {
-    grid-area: description;
-    color: ${t.colors.neutral.ink.light};
-    font-size: 12px;
-  }
-`,i=e(r)`
-  &:not(:first-child) {
-    margin-top: 0.5rem;
-    border-top: 1px solid ${t.colors.neutral.grey.base};
-    padding-top: 0.5rem;
-  }
-`;export{a as MenuItem,i as Section};
+export { MenuItem, Section };
 //# sourceMappingURL=styled.js.map