@veeqo/ui 9.9.3 → 10.0.0-beta.1

package/dist/components/Accordion/styled.cjs

@@ -11,20 +11,20 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const TapBarChild = styled__default.default(BaseContainer.BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
-const Left = styled__default.default(TapBarChild).withConfig({ displayName: "vui--Left", componentId: "vui--sjvmul" }) `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--1mm1lxm" }) `justify-content:flex-end;flex-grow:2;`;
+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--1moens1" }) `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--7euo6s" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
-const Description = styled__default.default(Text.Text).withConfig({ displayName: "vui--Description", componentId: "vui--1snn6nn" }) `margin-top:8px;`;
-const AccordionContent = styled__default.default(framerMotion.motion(BaseContainer.BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--to1g7a" }) `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--g3berv" }) `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--59wczx" }) ``;
-const UnstyledAccordionSummary = styled__default.default.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--fyolu6" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}`;
+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;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild)<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"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,aAAA,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,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAGD,uBAAM,CAAC,OAAO,uIAGnBG,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;;;;;;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild)<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"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.js

@@ -5,20 +5,20 @@ import { Text } from '../Text/Text.js';
 import { theme } from '../../theme/index.js';
 import { sizes } from '../../theme/modules/sizes.js';
 
-const TapBarChild = styled(BaseContainer).withConfig({ displayName: "vui--TapBarChild", componentId: "vui--3ngcs3" }) `display:flex;flex-direction:row;align-items:center;`;
-const Left = styled(TapBarChild).withConfig({ displayName: "vui--Left", componentId: "vui--sjvmul" }) `svg{margin-right:12px;height:${sizes.base};width:${sizes.base};color:${({ glyphColor }) => glyphColor};}`;
-const Right = styled(TapBarChild).withConfig({ displayName: "vui--Right", componentId: "vui--1mm1lxm" }) `justify-content:flex-end;flex-grow:2;`;
+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--1moens1" }) `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--7euo6s" }) `display:flex;flex-direction:row;align-items:center;height:16px;`;
-const Description = styled(Text).withConfig({ displayName: "vui--Description", componentId: "vui--1snn6nn" }) `margin-top:8px;`;
-const AccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--AccordionContent", componentId: "vui--to1g7a" }) `margin-top:4px;background:rgba(217, 235, 248, 0.5);padding:10px 26px;`;
-const AccordionDetails = styled.details.withConfig({ displayName: "vui--AccordionDetails", componentId: "vui--g3berv" }) `summary{list-style-type:none;::-webkit-details-marker{display:none;}}`;
-const UnstyledAccordionContent = styled(motion(BaseContainer)).withConfig({ displayName: "vui--UnstyledAccordionContent", componentId: "vui--59wczx" }) ``;
-const UnstyledAccordionSummary = styled.summary.withConfig({ displayName: "vui--UnstyledAccordionSummary", componentId: "vui--fyolu6" }) `&:focus{outline:none;box-shadow:0 0 0 2px ${theme.colors.secondary.blue.light};}`;
+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};}`;
 
 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":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild)<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"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,aAAA,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,aAAA,EAAA,CAAA,CAAA,CAAA;AAE9D,MAAM,wBAAwB,GAAG,MAAM,CAAC,OAAO,uIAGnB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/Accordion/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { motion } from 'framer-motion';\nimport { BaseContainer } from '../BaseContainer';\nimport { Text } from '../Text';\nimport { theme } from '../../theme';\nimport { sizes } from '../../theme/modules/sizes';\n\nconst TapBarChild = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n`;\n\nconst Left = styled(TapBarChild)<{ glyphColor: string }>`\n  svg {\n    margin-right: 12px;\n    height: ${sizes.base};\n    width: ${sizes.base};\n\n    color: ${({ glyphColor }) => glyphColor};\n  }\n`;\n\nconst Right = styled(TapBarChild as any)`\n  justify-content: flex-end;\n  flex-grow: 2;\n`;\n\n/**\n * Due to unique behaviour observed in Safari, we override the outline property when\n * the accordion is focussed.\n */\nconst AccordionSummary = styled.summary`\n  display: flex;\n  flex-direction: column;\n  padding: 12px;\n  border-radius: 4px;\n  user-select: none;\n  cursor: pointer;\n\n  border: 1px solid ${theme.colors.neutral.grey.dark};\n\n  :focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  :active {\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nconst Top = styled(BaseContainer)`\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  height: 16px;\n`;\n\nconst Description = styled(Text)`\n  margin-top: 8px;\n`;\n\nconst AccordionContent = styled(motion(BaseContainer))`\n  margin-top: 4px;\n  background: rgba(217, 235, 248, 0.5);\n  padding: 10px 26px;\n`;\n\nconst AccordionDetails = styled.details`\n  summary {\n    list-style-type: none;\n    ::-webkit-details-marker {\n      display: none;\n    }\n  }\n`;\n\nconst UnstyledAccordionContent = styled(motion(BaseContainer))``;\n\nconst UnstyledAccordionSummary = styled.summary`\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n`;\n\nexport {\n  AccordionSummary,\n  Top,\n  Text,\n  Left,\n  Right,\n  Description,\n  AccordionDetails,\n  AccordionContent,\n  UnstyledAccordionContent,\n  UnstyledAccordionSummary,\n};\n"],"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/ActionMenu/styled.cjs

@@ -9,8 +9,8 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const MenuItem = styled__default.default(reactAriaComponents.MenuItem).withConfig({ displayName: "vui--MenuItem", componentId: "vui--1vhrzmz" }) `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--1lpesff" }) `&:not(:first-child){margin-top:0.5rem;border-top:1px solid ${index.theme.colors.neutral.grey.base};padding-top:0.5rem;}`;
+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;}`;
 
 exports.MenuItem = MenuItem;
 exports.Section = Section;

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/ActionMenu/styled.ts"],"sourcesContent":["import { MenuItem as AriaMenuItem, Section as AriaSection } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { getTextStyles } from '../../theme/utils';\n\nexport const MenuItem = styled(AriaMenuItem)`\n  display: grid;\n  grid-template-areas:\n    'label'\n    'description';\n\n  cursor: pointer;\n  margin: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n  border-radius: ${theme.radius.base};\n  outline: 0;\n\n  &:is(a) {\n    ${getTextStyles(theme.text.link)}\n  }\n  &:is(div) {\n    ${getTextStyles(theme.text.body)}\n  }\n\n  white-space: nowrap;\n\n  &[data-focused] {\n    color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n  &[data-hovered] {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.lightest};\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  [slot='label'] {\n    grid-area: label;\n  }\n\n  [slot='description'] {\n    grid-area: description;\n    color: ${theme.colors.neutral.ink.light};\n    font-size: 12px;\n  }\n`;\n\nexport const Section = styled(AriaSection)`\n  &:not(:first-child) {\n    margin-top: 0.5rem;\n    border-top: 1px solid ${theme.colors.neutral.grey.base};\n    padding-top: 0.5rem;\n  }\n`;\n"],"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,cAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAGdF,WAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/ActionMenu/styled.ts"],"sourcesContent":["import { MenuItem as AriaMenuItem, Section as AriaSection } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { getTextStyles } from '../../theme/utils';\n\nexport const MenuItem = styled(AriaMenuItem)`\n  display: grid;\n  grid-template-areas:\n    'label'\n    'description';\n\n  cursor: pointer;\n  margin: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n  border-radius: ${theme.radius.base};\n  outline: 0;\n\n  &:is(a) {\n    ${getTextStyles(theme.text.link)}\n  }\n  &:is(div) {\n    ${getTextStyles(theme.text.body)}\n  }\n\n  white-space: nowrap;\n\n  &[data-focused] {\n    color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n  &[data-hovered] {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.lightest};\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  [slot='label'] {\n    grid-area: label;\n  }\n\n  [slot='description'] {\n    grid-area: description;\n    color: ${theme.colors.neutral.ink.light};\n    font-size: 12px;\n  }\n`;\n\nexport const Section = styled(AriaSection)`\n  &:not(:first-child) {\n    margin-top: 0.5rem;\n    border-top: 1px solid ${theme.colors.neutral.grey.base};\n    padding-top: 0.5rem;\n  }\n`;\n"],"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.js

@@ -3,8 +3,8 @@ import styled from 'styled-components';
 import { theme } from '../../theme/index.js';
 import { getTextStyles } from '../../theme/utils.js';
 
-const MenuItem = styled(MenuItem$1).withConfig({ displayName: "vui--MenuItem", componentId: "vui--1vhrzmz" }) `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--1lpesff" }) `&:not(:first-child){margin-top:0.5rem;border-top:1px solid ${theme.colors.neutral.grey.base};padding-top:0.5rem;}`;
+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;}`;
 
 export { MenuItem, Section };
 //# sourceMappingURL=styled.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../src/components/ActionMenu/styled.ts"],"sourcesContent":["import { MenuItem as AriaMenuItem, Section as AriaSection } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { getTextStyles } from '../../theme/utils';\n\nexport const MenuItem = styled(AriaMenuItem)`\n  display: grid;\n  grid-template-areas:\n    'label'\n    'description';\n\n  cursor: pointer;\n  margin: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n  border-radius: ${theme.radius.base};\n  outline: 0;\n\n  &:is(a) {\n    ${getTextStyles(theme.text.link)}\n  }\n  &:is(div) {\n    ${getTextStyles(theme.text.body)}\n  }\n\n  white-space: nowrap;\n\n  &[data-focused] {\n    color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n  &[data-hovered] {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.lightest};\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  [slot='label'] {\n    grid-area: label;\n  }\n\n  [slot='description'] {\n    grid-area: description;\n    color: ${theme.colors.neutral.ink.light};\n    font-size: 12px;\n  }\n`;\n\nexport const Section = styled(AriaSection)`\n  &:not(:first-child) {\n    margin-top: 0.5rem;\n    border-top: 1px solid ${theme.colors.neutral.grey.base};\n    padding-top: 0.5rem;\n  }\n`;\n"],"names":["AriaMenuItem","AriaSection"],"mappings":";;;;;MAKa,QAAQ,GAAG,MAAM,CAACA,UAAY,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4EAAA,EAOhC,KAAK,CAAC,KAAK,CAAC,EAAE,CACb,SAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAI9B,mBAAA,EAAA,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,WAAA,EAG9B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,0CAAA,EAMvB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACjB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,mCAAA,EAGrC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAK/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAC7C,OAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAS9B,mFAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iBAAA;AAK9B,MAAA,OAAO,GAAG,MAAM,CAACC,SAAW,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAGd,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../src/components/ActionMenu/styled.ts"],"sourcesContent":["import { MenuItem as AriaMenuItem, Section as AriaSection } from 'react-aria-components';\nimport styled from 'styled-components';\nimport { theme } from '../../theme';\nimport { getTextStyles } from '../../theme/utils';\n\nexport const MenuItem = styled(AriaMenuItem)`\n  display: grid;\n  grid-template-areas:\n    'label'\n    'description';\n\n  cursor: pointer;\n  margin: ${theme.sizes.xs};\n  padding: ${theme.sizes.sm};\n  border-radius: ${theme.radius.base};\n  outline: 0;\n\n  &:is(a) {\n    ${getTextStyles(theme.text.link)}\n  }\n  &:is(div) {\n    ${getTextStyles(theme.text.body)}\n  }\n\n  white-space: nowrap;\n\n  &[data-focused] {\n    color: ${theme.colors.secondary.blue.base};\n    box-shadow: 0 0 0 4px ${theme.colors.secondary.blue.light};\n  }\n  &[data-hovered] {\n    background-color: ${theme.colors.neutral.grey.light};\n  }\n\n  &[data-disabled] {\n    cursor: not-allowed;\n    background-color: ${theme.colors.neutral.grey.lightest};\n    color: ${theme.colors.neutral.ink.light};\n  }\n\n  [slot='label'] {\n    grid-area: label;\n  }\n\n  [slot='description'] {\n    grid-area: description;\n    color: ${theme.colors.neutral.ink.light};\n    font-size: 12px;\n  }\n`;\n\nexport const Section = styled(AriaSection)`\n  &:not(:first-child) {\n    margin-top: 0.5rem;\n    border-top: 1px solid ${theme.colors.neutral.grey.base};\n    padding-top: 0.5rem;\n  }\n`;\n"],"names":["AriaMenuItem","AriaSection"],"mappings":";;;;;MAKa,QAAQ,GAAG,MAAM,CAACA,UAAY,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,eAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,4EAAA,EAOhC,KAAK,CAAC,KAAK,CAAC,EAAE,CACb,SAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE,CAAA,eAAA,EACR,KAAK,CAAC,MAAM,CAAC,IAAI,CAI9B,mBAAA,EAAA,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,WAAA,EAG9B,aAAa,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,CAAA,0CAAA,EAMvB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,sBAAA,EACjB,KAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,mCAAA,EAGrC,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAA,uDAAA,EAK/B,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,QAAQ,CAC7C,OAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAS9B,mFAAA,EAAA,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAA,iBAAA;AAK9B,MAAA,OAAO,GAAG,MAAM,CAACC,SAAW,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,cAAA,EAAA,WAAA,EAAA,YAAA,EAAA,CAAA,CAAA,CAAA,2DAAA,EAGd,KAAK,CAAC,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,IAAI;;;;"}

package/dist/components/Alerts/Alert/styled.cjs

@@ -13,7 +13,7 @@ const AlertContainer = styled__default.default(Stack.Stack).attrs({
     alignX: 'between',
     alignY: 'top',
     spacing: 0,
-}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--yb86nz" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${index.theme.radius.base};background-color:${({ colours: { background } }) => background};`;
+}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--1w89ewm" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${index.theme.radius.base};background-color:${({ colours: { background } }) => background};`;
 
 exports.AlertContainer = AlertContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Alerts/Alert/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":["styled","Stack","theme"],"mappings":";;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxCC,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":["styled","Stack","theme"],"mappings":";;;;;;;;;;AAKa,MAAA,cAAc,GAAGA,uBAAM,CAACC,WAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxCC,WAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}

package/dist/components/Alerts/Alert/styled.js

@@ -7,7 +7,7 @@ const AlertContainer = styled(Stack).attrs({
     alignX: 'between',
     alignY: 'top',
     spacing: 0,
-}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--yb86nz" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${theme.radius.base};background-color:${({ colours: { background } }) => background};`;
+}).withConfig({ displayName: "vui--AlertContainer", componentId: "vui--1w89ewm" }) `border:1px solid ${({ colours: { primary } }) => primary};border-radius:${theme.radius.base};background-color:${({ colours: { background } }) => background};`;
 
 export { AlertContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/Alerts/Alert/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Alerts/Alert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { Stack } from '../../Stack';\nimport { AlertColours } from '../types';\nimport { theme } from '../../../theme';\n\nexport const AlertContainer = styled(Stack).attrs<{ colours: AlertColours }>({\n  direction: 'horizontal',\n  alignX: 'between',\n  alignY: 'top',\n  spacing: 0,\n})<{\n  colours: AlertColours;\n}>`\n  border: 1px solid ${({ colours: { primary } }) => primary};\n  border-radius: ${theme.radius.base};\n\n  background-color: ${({ colours: { background } }) => background};\n`;\n"],"names":[],"mappings":";;;;AAKa,MAAA,cAAc,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC,KAAK,CAA4B;AAC3E,IAAA,SAAS,EAAE,YAAY;AACvB,IAAA,MAAM,EAAE,SAAS;AACjB,IAAA,MAAM,EAAE,KAAK;AACb,IAAA,OAAO,EAAE,CAAC;AACX,CAAA,CAAC,CAGoB,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,CAAC,EAAE,OAAO,EAAE,EAAE,OAAO,EAAE,EAAE,KAAK,OAAO,kBACxC,KAAK,CAAC,MAAM,CAAC,IAAI,CAAA,kBAAA,EAEd,CAAC,EAAE,OAAO,EAAE,EAAE,UAAU,EAAE,EAAE,KAAK,UAAU;;;;"}

package/dist/components/Alerts/MiniAlert/styled.cjs

@@ -7,7 +7,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const MiniAlertContainer = styled__default.default.div.withConfig({ displayName: "vui--MiniAlertContainer", componentId: "vui--1n2xu5o" }) `display:flex;gap:${index.theme.sizes.xs};`;
+const MiniAlertContainer = styled__default.default.div.withConfig({ displayName: "vui--MiniAlertContainer", componentId: "vui--19unpg" }) `display:flex;gap:${index.theme.sizes.xs};`;
 
 exports.MiniAlertContainer = MiniAlertContainer;
 //# sourceMappingURL=styled.cjs.map

package/dist/components/Alerts/MiniAlert/styled.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Alerts/MiniAlert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const MiniAlertContainer = styled.div`\n  display: flex;\n  gap: ${theme.sizes.xs};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGO,MAAM,kBAAkB,GAAGA,uBAAM,CAAC,GAAG,CAEnC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../../src/components/Alerts/MiniAlert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const MiniAlertContainer = styled.div`\n  display: flex;\n  gap: ${theme.sizes.xs};\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAGO,MAAM,kBAAkB,GAAGA,uBAAM,CAAC,GAAG,CAEnC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAAC,WAAK,CAAC,KAAK,CAAC,EAAE;;;;"}

package/dist/components/Alerts/MiniAlert/styled.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components';
 import { theme } from '../../../theme/index.js';
 
-const MiniAlertContainer = styled.div.withConfig({ displayName: "vui--MiniAlertContainer", componentId: "vui--1n2xu5o" }) `display:flex;gap:${theme.sizes.xs};`;
+const MiniAlertContainer = styled.div.withConfig({ displayName: "vui--MiniAlertContainer", componentId: "vui--19unpg" }) `display:flex;gap:${theme.sizes.xs};`;
 
 export { MiniAlertContainer };
 //# sourceMappingURL=styled.js.map

package/dist/components/Alerts/MiniAlert/styled.js.map

@@ -1 +1 @@
-{"version":3,"file":"styled.js","sources":["../../../../src/components/Alerts/MiniAlert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const MiniAlertContainer = styled.div`\n  display: flex;\n  gap: ${theme.sizes.xs};\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAEnC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}
+{"version":3,"file":"styled.js","sources":["../../../../src/components/Alerts/MiniAlert/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { theme } from 'Theme';\n\nexport const MiniAlertContainer = styled.div`\n  display: flex;\n  gap: ${theme.sizes.xs};\n`;\n"],"names":[],"mappings":";;;AAGO,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAEnC,UAAA,CAAA,EAAA,WAAA,EAAA,yBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA,iBAAA,EAAA,KAAK,CAAC,KAAK,CAAC,EAAE;;;;"}

package/dist/components/Anchor/Anchor.cjs

@@ -1,19 +1,44 @@
 'use strict';
 
 var React = require('react');
+var sizes = require('../../theme/modules/sizes.cjs');
+var urlUtils = require('./utils/urlUtils.cjs');
 var styled = require('./styled.cjs');
-var isExternalLink = require('../../utils/isExternalLink.cjs');
+var HelpIcon = require('../../tempIcons/HelpIcon.cjs');
+var LaunchIcon = require('../../tempIcons/LaunchIcon.cjs');
+var isExternalLink = require('./isExternalLink.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 
-const Anchor = ({ children, href, rel, allowedHostnames = isExternalLink.defaultAllowedHostnames, ...props }) => {
-    // Determine if the link is external based on the allowed hostnames
-    const isExternal = isExternalLink.isExternalLink(href, allowedHostnames);
-    // Set default rel property for external links
-    const setDefaultRelValue = rel || (isExternal ? 'noopener noreferrer' : undefined);
-    return (React__default.default.createElement(styled.CommonAnchor, { href: href, rel: setDefaultRelValue, ...props }, children));
+/**
+ * Anchor component for handling context-aware links with consistent functionality and styling options
+ *
+ * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
+ *
+ * @param variant - The visual style variant ('base' or 'unstyled')
+ * @param href - The URL the link points to (will be processed to be context-aware)
+ * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)
+ * @param children - The content of the anchor
+ * @param rest - All other standard anchor HTML attributes
+ */
+const Anchor = ({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, children, target, rel, ...rest }) => {
+    // Process the URL to make it context-aware
+    const processedHref = href ? urlUtils.createContextAwareUrl(href) : href;
+    // Determine if link is external based on processed href
+    const isExternal = processedHref ? isExternalLink.isExternalLink(processedHref) : false;
+    // Set security attributes for external links if not overridden
+    const secureTarget = target || (isExternal ? '_blank' : undefined);
+    const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);
+    // Select the appropriate styled component based on variant
+    const AnchorComponent = variant === 'unstyled' ? styled.UnstyledAnchor : styled.StandardAnchor;
+    const shouldShowExternalLinkIcon = isExternal && !hideExternalLinkIcon && variant === 'base';
+    return (React__default.default.createElement(AnchorComponent, { href: processedHref, target: secureTarget, rel: secureRel, size: size, ...rest },
+        leftIconSlot,
+        showHelpIcon && !leftIconSlot && React__default.default.createElement(HelpIcon.HelpIcon, { style: { marginRight: sizes.sizes.xs } }),
+        children,
+        shouldShowExternalLinkIcon && React__default.default.createElement(LaunchIcon.LaunchIcon, { style: { marginLeft: sizes.sizes.xs } })));
 };
 
 exports.Anchor = Anchor;

package/dist/components/Anchor/Anchor.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React, { ReactNode, AnchorHTMLAttributes } from 'react';\n\nimport { CommonAnchor } from './styled';\nimport { defaultAllowedHostnames, isExternalLink } from '../../utils/isExternalLink';\n\nexport type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  children?: ReactNode;\n  href: string;\n  rel?: string;\n  allowedHostnames?: string[];\n};\n\nexport const Anchor = ({\n  children,\n  href,\n  rel,\n  allowedHostnames = defaultAllowedHostnames,\n  ...props\n}: AnchorProps) => {\n  // Determine if the link is external based on the allowed hostnames\n  const isExternal = isExternalLink(href, allowedHostnames);\n  // Set default rel property for external links\n  const setDefaultRelValue = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n  return (\n    <CommonAnchor href={href} rel={setDefaultRelValue} {...props}>\n      {children}\n    </CommonAnchor>\n  );\n};\n"],"names":["defaultAllowedHostnames","isExternalLink","React","CommonAnchor"],"mappings":";;;;;;;;;;MAYa,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,gBAAgB,GAAGA,sCAAuB,EAC1C,GAAG,KAAK,EACI,KAAI;;IAEhB,MAAM,UAAU,GAAGC,6BAAc,CAAC,IAAI,EAAE,gBAAgB,CAAC;;AAEzD,IAAA,MAAM,kBAAkB,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;AAElF,IAAA,QACEC,sBAAC,CAAA,aAAA,CAAAC,mBAAY,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAM,GAAA,KAAK,IACzD,QAAQ,CACI;AAEnB;;;;"}
+{"version":3,"file":"Anchor.cjs","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { StandardAnchor, UnstyledAnchor } from './styled';\n\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { LaunchIcon } from '../../tempIcons/LaunchIcon';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = ({\n  variant = 'base',\n  size = 'base',\n  href,\n  showHelpIcon = false,\n  leftIconSlot = null,\n  hideExternalLinkIcon = false,\n  children,\n  target,\n  rel,\n  ...rest\n}: AnchorProps) => {\n  // Process the URL to make it context-aware\n  const processedHref = href ? createContextAwareUrl(href) : href;\n\n  // Determine if link is external based on processed href\n  const isExternal = processedHref ? isExternalLink(processedHref) : false;\n\n  // Set security attributes for external links if not overridden\n  const secureTarget = target || (isExternal ? '_blank' : undefined);\n  const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n  // Select the appropriate styled component based on variant\n  const AnchorComponent = variant === 'unstyled' ? UnstyledAnchor : StandardAnchor;\n\n  const shouldShowExternalLinkIcon = isExternal && !hideExternalLinkIcon && variant === 'base';\n\n  return (\n    <AnchorComponent\n      href={processedHref}\n      target={secureTarget}\n      rel={secureRel}\n      size={size}\n      {...rest}\n    >\n      {leftIconSlot}\n      {showHelpIcon && !leftIconSlot && <HelpIcon style={{ marginRight: sizes.xs }} />}\n\n      {children}\n      {shouldShowExternalLinkIcon && <LaunchIcon style={{ marginLeft: sizes.xs }} />}\n    </AnchorComponent>\n  );\n};\n"],"names":["createContextAwareUrl","isExternalLink","UnstyledAnchor","StandardAnchor","React","HelpIcon","sizes","LaunchIcon"],"mappings":";;;;;;;;;;;;;;AAYA;;;;;;;;;;AAUG;AACU,MAAA,MAAM,GAAG,CAAC,EACrB,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAGA,8BAAqB,CAAC,IAAI,CAAC,GAAG,IAAI;;AAG/D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAGC,6BAAc,CAAC,aAAa,CAAC,GAAG,KAAK;;AAGxE,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,eAAe,GAAG,OAAO,KAAK,UAAU,GAAGC,qBAAc,GAAGC,qBAAc;IAEhF,MAAM,0BAA0B,GAAG,UAAU,IAAI,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE5F,QACEC,qCAAC,eAAe,EAAA,EACd,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,KACN,IAAI,EAAA;QAEP,YAAY;AACZ,QAAA,YAAY,IAAI,CAAC,YAAY,IAAIA,sBAAA,CAAA,aAAA,CAACC,iBAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,WAAW,EAAEC,WAAK,CAAC,EAAE,EAAE,EAAI,CAAA;QAE/E,QAAQ;AACR,QAAA,0BAA0B,IAAIF,sBAAC,CAAA,aAAA,CAAAG,qBAAU,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAED,WAAK,CAAC,EAAE,EAAE,EAAI,CAAA,CAC9D;AAEtB;;;;"}

package/dist/components/Anchor/Anchor.d.ts

@@ -1,8 +1,14 @@
-import React, { ReactNode, AnchorHTMLAttributes } from 'react';
-export type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {
-    children?: ReactNode;
-    href: string;
-    rel?: string;
-    allowedHostnames?: string[];
-};
-export declare const Anchor: ({ children, href, rel, allowedHostnames, ...props }: AnchorProps) => React.JSX.Element;
+import React from 'react';
+import { AnchorProps } from './types';
+/**
+ * Anchor component for handling context-aware links with consistent functionality and styling options
+ *
+ * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
+ *
+ * @param variant - The visual style variant ('base' or 'unstyled')
+ * @param href - The URL the link points to (will be processed to be context-aware)
+ * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)
+ * @param children - The content of the anchor
+ * @param rest - All other standard anchor HTML attributes
+ */
+export declare const Anchor: ({ variant, size, href, showHelpIcon, leftIconSlot, hideExternalLinkIcon, children, target, rel, ...rest }: AnchorProps) => React.JSX.Element;

package/dist/components/Anchor/Anchor.js

@@ -1,13 +1,38 @@
 import React__default from 'react';
-import { CommonAnchor } from './styled.js';
-import { isExternalLink, defaultAllowedHostnames } from '../../utils/isExternalLink.js';
+import { sizes } from '../../theme/modules/sizes.js';
+import { createContextAwareUrl } from './utils/urlUtils.js';
+import { UnstyledAnchor, StandardAnchor } from './styled.js';
+import { HelpIcon } from '../../tempIcons/HelpIcon.js';
+import { LaunchIcon } from '../../tempIcons/LaunchIcon.js';
+import { isExternalLink } from './isExternalLink.js';
 
-const Anchor = ({ children, href, rel, allowedHostnames = defaultAllowedHostnames, ...props }) => {
-    // Determine if the link is external based on the allowed hostnames
-    const isExternal = isExternalLink(href, allowedHostnames);
-    // Set default rel property for external links
-    const setDefaultRelValue = rel || (isExternal ? 'noopener noreferrer' : undefined);
-    return (React__default.createElement(CommonAnchor, { href: href, rel: setDefaultRelValue, ...props }, children));
+/**
+ * Anchor component for handling context-aware links with consistent functionality and styling options
+ *
+ * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev
+ *
+ * @param variant - The visual style variant ('base' or 'unstyled')
+ * @param href - The URL the link points to (will be processed to be context-aware)
+ * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)
+ * @param children - The content of the anchor
+ * @param rest - All other standard anchor HTML attributes
+ */
+const Anchor = ({ variant = 'base', size = 'base', href, showHelpIcon = false, leftIconSlot = null, hideExternalLinkIcon = false, children, target, rel, ...rest }) => {
+    // Process the URL to make it context-aware
+    const processedHref = href ? createContextAwareUrl(href) : href;
+    // Determine if link is external based on processed href
+    const isExternal = processedHref ? isExternalLink(processedHref) : false;
+    // Set security attributes for external links if not overridden
+    const secureTarget = target || (isExternal ? '_blank' : undefined);
+    const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);
+    // Select the appropriate styled component based on variant
+    const AnchorComponent = variant === 'unstyled' ? UnstyledAnchor : StandardAnchor;
+    const shouldShowExternalLinkIcon = isExternal && !hideExternalLinkIcon && variant === 'base';
+    return (React__default.createElement(AnchorComponent, { href: processedHref, target: secureTarget, rel: secureRel, size: size, ...rest },
+        leftIconSlot,
+        showHelpIcon && !leftIconSlot && React__default.createElement(HelpIcon, { style: { marginRight: sizes.xs } }),
+        children,
+        shouldShowExternalLinkIcon && React__default.createElement(LaunchIcon, { style: { marginLeft: sizes.xs } })));
 };
 
 export { Anchor };

package/dist/components/Anchor/Anchor.js.map

@@ -1 +1 @@
-{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React, { ReactNode, AnchorHTMLAttributes } from 'react';\n\nimport { CommonAnchor } from './styled';\nimport { defaultAllowedHostnames, isExternalLink } from '../../utils/isExternalLink';\n\nexport type AnchorProps = AnchorHTMLAttributes<HTMLAnchorElement> & {\n  children?: ReactNode;\n  href: string;\n  rel?: string;\n  allowedHostnames?: string[];\n};\n\nexport const Anchor = ({\n  children,\n  href,\n  rel,\n  allowedHostnames = defaultAllowedHostnames,\n  ...props\n}: AnchorProps) => {\n  // Determine if the link is external based on the allowed hostnames\n  const isExternal = isExternalLink(href, allowedHostnames);\n  // Set default rel property for external links\n  const setDefaultRelValue = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n  return (\n    <CommonAnchor href={href} rel={setDefaultRelValue} {...props}>\n      {children}\n    </CommonAnchor>\n  );\n};\n"],"names":["React"],"mappings":";;;;MAYa,MAAM,GAAG,CAAC,EACrB,QAAQ,EACR,IAAI,EACJ,GAAG,EACH,gBAAgB,GAAG,uBAAuB,EAC1C,GAAG,KAAK,EACI,KAAI;;IAEhB,MAAM,UAAU,GAAG,cAAc,CAAC,IAAI,EAAE,gBAAgB,CAAC;;AAEzD,IAAA,MAAM,kBAAkB,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;AAElF,IAAA,QACEA,cAAC,CAAA,aAAA,CAAA,YAAY,EAAC,EAAA,IAAI,EAAE,IAAI,EAAE,GAAG,EAAE,kBAAkB,EAAM,GAAA,KAAK,IACzD,QAAQ,CACI;AAEnB;;;;"}
+{"version":3,"file":"Anchor.js","sources":["../../../src/components/Anchor/Anchor.tsx"],"sourcesContent":["import React from 'react';\n\nimport { sizes } from 'Theme/modules/sizes';\nimport { createContextAwareUrl } from './utils/urlUtils';\nimport { AnchorProps } from './types';\nimport { StandardAnchor, UnstyledAnchor } from './styled';\n\nimport { HelpIcon } from '../../tempIcons/HelpIcon';\nimport { LaunchIcon } from '../../tempIcons/LaunchIcon';\n\nimport { isExternalLink } from './isExternalLink';\n\n/**\n * Anchor component for handling context-aware links with consistent functionality and styling options\n *\n * https://www.figma.com/design/KFfBvJvYT4evKe9eiLEnwD/%F0%9F%8E%A8-Design-System?node-id=1170-63891&m=dev\n *\n * @param variant - The visual style variant ('base' or 'unstyled')\n * @param href - The URL the link points to (will be processed to be context-aware)\n * @param showHelpIcon - Whether to show a help icon on the left (defaults to false)\n * @param children - The content of the anchor\n * @param rest - All other standard anchor HTML attributes\n */\nexport const Anchor = ({\n  variant = 'base',\n  size = 'base',\n  href,\n  showHelpIcon = false,\n  leftIconSlot = null,\n  hideExternalLinkIcon = false,\n  children,\n  target,\n  rel,\n  ...rest\n}: AnchorProps) => {\n  // Process the URL to make it context-aware\n  const processedHref = href ? createContextAwareUrl(href) : href;\n\n  // Determine if link is external based on processed href\n  const isExternal = processedHref ? isExternalLink(processedHref) : false;\n\n  // Set security attributes for external links if not overridden\n  const secureTarget = target || (isExternal ? '_blank' : undefined);\n  const secureRel = rel || (isExternal ? 'noopener noreferrer' : undefined);\n\n  // Select the appropriate styled component based on variant\n  const AnchorComponent = variant === 'unstyled' ? UnstyledAnchor : StandardAnchor;\n\n  const shouldShowExternalLinkIcon = isExternal && !hideExternalLinkIcon && variant === 'base';\n\n  return (\n    <AnchorComponent\n      href={processedHref}\n      target={secureTarget}\n      rel={secureRel}\n      size={size}\n      {...rest}\n    >\n      {leftIconSlot}\n      {showHelpIcon && !leftIconSlot && <HelpIcon style={{ marginRight: sizes.xs }} />}\n\n      {children}\n      {shouldShowExternalLinkIcon && <LaunchIcon style={{ marginLeft: sizes.xs }} />}\n    </AnchorComponent>\n  );\n};\n"],"names":["React"],"mappings":";;;;;;;;AAYA;;;;;;;;;;AAUG;AACU,MAAA,MAAM,GAAG,CAAC,EACrB,OAAO,GAAG,MAAM,EAChB,IAAI,GAAG,MAAM,EACb,IAAI,EACJ,YAAY,GAAG,KAAK,EACpB,YAAY,GAAG,IAAI,EACnB,oBAAoB,GAAG,KAAK,EAC5B,QAAQ,EACR,MAAM,EACN,GAAG,EACH,GAAG,IAAI,EACK,KAAI;;AAEhB,IAAA,MAAM,aAAa,GAAG,IAAI,GAAG,qBAAqB,CAAC,IAAI,CAAC,GAAG,IAAI;;AAG/D,IAAA,MAAM,UAAU,GAAG,aAAa,GAAG,cAAc,CAAC,aAAa,CAAC,GAAG,KAAK;;AAGxE,IAAA,MAAM,YAAY,GAAG,MAAM,KAAK,UAAU,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClE,IAAA,MAAM,SAAS,GAAG,GAAG,KAAK,UAAU,GAAG,qBAAqB,GAAG,SAAS,CAAC;;AAGzE,IAAA,MAAM,eAAe,GAAG,OAAO,KAAK,UAAU,GAAG,cAAc,GAAG,cAAc;IAEhF,MAAM,0BAA0B,GAAG,UAAU,IAAI,CAAC,oBAAoB,IAAI,OAAO,KAAK,MAAM;IAE5F,QACEA,6BAAC,eAAe,EAAA,EACd,IAAI,EAAE,aAAa,EACnB,MAAM,EAAE,YAAY,EACpB,GAAG,EAAE,SAAS,EACd,IAAI,EAAE,IAAI,KACN,IAAI,EAAA;QAEP,YAAY;AACZ,QAAA,YAAY,IAAI,CAAC,YAAY,IAAIA,cAAA,CAAA,aAAA,CAAC,QAAQ,EAAC,EAAA,KAAK,EAAE,EAAE,WAAW,EAAE,KAAK,CAAC,EAAE,EAAE,EAAI,CAAA;QAE/E,QAAQ;AACR,QAAA,0BAA0B,IAAIA,cAAC,CAAA,aAAA,CAAA,UAAU,EAAC,EAAA,KAAK,EAAE,EAAE,UAAU,EAAE,KAAK,CAAC,EAAE,EAAE,EAAI,CAAA,CAC9D;AAEtB;;;;"}

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

@@ -1 +1,2 @@
-export { Anchor } from './Anchor';
+export * from './Anchor';
+export * from './types';

package/dist/components/Anchor/isExternalLink.cjs

@@ -0,0 +1,25 @@
+'use strict';
+
+var urlUtils = require('./utils/urlUtils.cjs');
+
+/**
+ * Check if a URL/path string is an external link
+ *
+ * External links are any that would take the user away from their current domain,
+ * with relative paths considered internal, but any other domain (including
+ * other veeqo.com subdomains like help.veeqo.com) considered external.
+ */
+function isExternalLink(urlOrPath) {
+    var _a, _b, _c;
+    if (urlUtils.isRelativeUrl(urlOrPath))
+        return false;
+    // For protocol-relative URLs, prepend 'http:' to properly parse
+    const { hostname } = new URL(urlOrPath.startsWith('//') ? `http:${urlOrPath}` : urlOrPath);
+    const requestHostname = hostname.toLowerCase();
+    const currentHostname = ((_c = (_b = (_a = window.location) === null || _a === undefined ? undefined : _a.hostname) === null || _b === undefined ? undefined : _b.toLowerCase) === null || _c === undefined ? undefined : _c.call(_b)) || '';
+    // Only treat as internal if it's the exact same hostname as current
+    return requestHostname !== currentHostname;
+}
+
+exports.isExternalLink = isExternalLink;
+//# sourceMappingURL=isExternalLink.cjs.map

package/dist/components/Anchor/isExternalLink.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"isExternalLink.cjs","sources":["../../../src/components/Anchor/isExternalLink.ts"],"sourcesContent":["import { isRelativeUrl } from './utils/urlUtils';\n\n/**\n * Check if a URL/path string is an external link\n *\n * External links are any that would take the user away from their current domain,\n * with relative paths considered internal, but any other domain (including\n * other veeqo.com subdomains like help.veeqo.com) considered external.\n */\nexport function isExternalLink(urlOrPath: string): boolean {\n  if (isRelativeUrl(urlOrPath)) return false;\n\n  // For protocol-relative URLs, prepend 'http:' to properly parse\n  const { hostname } = new URL(urlOrPath.startsWith('//') ? `http:${urlOrPath}` : urlOrPath);\n\n  const requestHostname = hostname.toLowerCase();\n  const currentHostname = window.location?.hostname?.toLowerCase?.() || '';\n\n  // Only treat as internal if it's the exact same hostname as current\n  return requestHostname !== currentHostname;\n}\n"],"names":["isRelativeUrl"],"mappings":";;;;AAEA;;;;;;AAMG;AACG,SAAU,cAAc,CAAC,SAAiB,EAAA;;IAC9C,IAAIA,sBAAa,CAAC,SAAS,CAAC;AAAE,QAAA,OAAO,KAAK;;IAG1C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAE,GAAG,SAAS,CAAC;AAE1F,IAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,WAAW,EAAE;AAC9C,IAAA,MAAM,eAAe,GAAG,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,WAAW,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,KAAI,EAAE;;IAGxE,OAAO,eAAe,KAAK,eAAe;AAC5C;;;;"}

package/dist/components/Anchor/isExternalLink.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Check if a URL/path string is an external link
+ *
+ * External links are any that would take the user away from their current domain,
+ * with relative paths considered internal, but any other domain (including
+ * other veeqo.com subdomains like help.veeqo.com) considered external.
+ */
+export declare function isExternalLink(urlOrPath: string): boolean;

package/dist/components/Anchor/isExternalLink.js

@@ -0,0 +1,23 @@
+import { isRelativeUrl } from './utils/urlUtils.js';
+
+/**
+ * Check if a URL/path string is an external link
+ *
+ * External links are any that would take the user away from their current domain,
+ * with relative paths considered internal, but any other domain (including
+ * other veeqo.com subdomains like help.veeqo.com) considered external.
+ */
+function isExternalLink(urlOrPath) {
+    var _a, _b, _c;
+    if (isRelativeUrl(urlOrPath))
+        return false;
+    // For protocol-relative URLs, prepend 'http:' to properly parse
+    const { hostname } = new URL(urlOrPath.startsWith('//') ? `http:${urlOrPath}` : urlOrPath);
+    const requestHostname = hostname.toLowerCase();
+    const currentHostname = ((_c = (_b = (_a = window.location) === null || _a === undefined ? undefined : _a.hostname) === null || _b === undefined ? undefined : _b.toLowerCase) === null || _c === undefined ? undefined : _c.call(_b)) || '';
+    // Only treat as internal if it's the exact same hostname as current
+    return requestHostname !== currentHostname;
+}
+
+export { isExternalLink };
+//# sourceMappingURL=isExternalLink.js.map

package/dist/components/Anchor/isExternalLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"isExternalLink.js","sources":["../../../src/components/Anchor/isExternalLink.ts"],"sourcesContent":["import { isRelativeUrl } from './utils/urlUtils';\n\n/**\n * Check if a URL/path string is an external link\n *\n * External links are any that would take the user away from their current domain,\n * with relative paths considered internal, but any other domain (including\n * other veeqo.com subdomains like help.veeqo.com) considered external.\n */\nexport function isExternalLink(urlOrPath: string): boolean {\n  if (isRelativeUrl(urlOrPath)) return false;\n\n  // For protocol-relative URLs, prepend 'http:' to properly parse\n  const { hostname } = new URL(urlOrPath.startsWith('//') ? `http:${urlOrPath}` : urlOrPath);\n\n  const requestHostname = hostname.toLowerCase();\n  const currentHostname = window.location?.hostname?.toLowerCase?.() || '';\n\n  // Only treat as internal if it's the exact same hostname as current\n  return requestHostname !== currentHostname;\n}\n"],"names":[],"mappings":";;AAEA;;;;;;AAMG;AACG,SAAU,cAAc,CAAC,SAAiB,EAAA;;IAC9C,IAAI,aAAa,CAAC,SAAS,CAAC;AAAE,QAAA,OAAO,KAAK;;IAG1C,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI,GAAG,CAAC,SAAS,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAA,KAAA,EAAQ,SAAS,CAAA,CAAE,GAAG,SAAS,CAAC;AAE1F,IAAA,MAAM,eAAe,GAAG,QAAQ,CAAC,WAAW,EAAE;AAC9C,IAAA,MAAM,eAAe,GAAG,CAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,MAAA,MAAM,CAAC,QAAQ,MAAA,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAE,QAAQ,MAAE,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,WAAW,MAAI,IAAA,IAAA,EAAA,KAAA,SAAA,GAAA,SAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,CAAA,KAAI,EAAE;;IAGxE,OAAO,eAAe,KAAK,eAAe;AAC5C;;;;"}

package/dist/components/Anchor/styled.cjs

@@ -1,13 +1,32 @@
 'use strict';
 
 var styled = require('styled-components');
+var utils = require('../../theme/utils.cjs');
 var index = require('../../theme/index.cjs');
 
 function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'default' in e ? e : { default: e }; }
 
 var styled__default = /*#__PURE__*/_interopDefaultCompat(styled);
 
-const CommonAnchor = styled__default.default.a.withConfig({ displayName: "vui--CommonAnchor", componentId: "vui--14i39s8" }) `box-sizing:border-box;display:inline-flex;margin:0;padding:0;font-family:${index.theme.text.link.fontFamily};font-style:${index.theme.text.link.fontStyle};font-weight:${index.theme.text.link.fontWeight};font-size:${index.theme.text.link.fontSize};line-height:${index.theme.text.link.lineHeight};color:${index.theme.colors.secondary.blue.base};text-decoration:${index.theme.text.link.textDecoration};&:hover{color:${index.theme.colors.secondary.blue.dark};}`;
+const sizeMappings = {
+    lg: index.theme.sizes.md,
+    md: index.theme.sizes[5],
+    base: index.theme.sizes.base,
+    small: index.theme.sizes[3],
+};
+const styleMappings = {
+    lg: 'linkLarge',
+    md: 'linkMedium',
+    base: 'link',
+    small: 'linkSmall',
+};
+const BaseAnchor = styled__default.default.a.withConfig({ displayName: "vui--BaseAnchor", componentId: "vui--1q44nrt" }) ``;
+// Standard variant styling
+const StandardAnchor = styled__default.default(BaseAnchor).withConfig({ displayName: "vui--StandardAnchor", componentId: "vui--1omsw63" }) `display:inline-flex;align-items:center;cursor:pointer;transition:color 0.1s ease;text-decoration:none;padding:0 2px;${({ size }) => utils.getTextStyles(index.theme.text[styleMappings[size]])};&:focus{outline:0;border-color:${index.theme.colors.secondary.blue.dark};border-radius:${index.theme.radius.base};box-shadow:0 0 0 2px ${index.theme.colors.secondary.blue.light};}&:hover{color:${index.theme.colors.secondary.blue.dark};}svg{width:${({ size }) => sizeMappings[size]};height:${({ size }) => sizeMappings[size]};vertical-align:middle;}`;
+// Unstyled variant with minimal styling
+const UnstyledAnchor = styled__default.default(BaseAnchor).withConfig({ displayName: "vui--UnstyledAnchor", componentId: "vui--7yxtrk" }) ``;
 
-exports.CommonAnchor = CommonAnchor;
+exports.BaseAnchor = BaseAnchor;
+exports.StandardAnchor = StandardAnchor;
+exports.UnstyledAnchor = UnstyledAnchor;
 //# sourceMappingURL=styled.cjs.map

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

@@ -1 +1 @@
-{"version":3,"file":"styled.cjs","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled from 'styled-components';\n\nimport { theme } from '../../theme';\n\nexport const CommonAnchor = styled.a`\n  box-sizing: border-box;\n  display: inline-flex;\n  margin: 0;\n  padding: 0;\n\n  font-family: ${theme.text.link.fontFamily};\n  font-style: ${theme.text.link.fontStyle};\n  font-weight: ${theme.text.link.fontWeight};\n  font-size: ${theme.text.link.fontSize};\n  line-height: ${theme.text.link.lineHeight};\n  color: ${theme.colors.secondary.blue.base};\n  text-decoration: ${theme.text.link.textDecoration};\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n`;\n"],"names":["styled","theme"],"mappings":";;;;;;;;;AAIa,MAAA,YAAY,GAAGA,uBAAM,CAAC,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,mBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,yEAAA,EAMnBC,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,eAC3BA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,SAAS,CACxB,aAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAC5B,WAAA,EAAAA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,aAAA,EACtBA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,UAAU,CAAA,OAAA,EAChCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,CAAA,iBAAA,EACtBA,WAAK,CAAC,IAAI,CAAC,IAAI,CAAC,cAAc,kBAGtCA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI;;;;"}
+{"version":3,"file":"styled.cjs","sources":["../../../src/components/Anchor/styled.ts"],"sourcesContent":["import styled from 'styled-components';\nimport { getTextStyles } from '../../theme/utils';\nimport { theme } from '../../theme';\nimport { AnchorSize } from './types';\n\ntype StyledAnchorProps = {\n  size: AnchorSize;\n};\n\nconst sizeMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: theme.sizes.md,\n  md: theme.sizes[5],\n  base: theme.sizes.base,\n  small: theme.sizes[3],\n};\n\nconst styleMappings: Record<StyledAnchorProps['size'], string> = {\n  lg: 'linkLarge',\n  md: 'linkMedium',\n  base: 'link',\n  small: 'linkSmall',\n};\n\nexport const BaseAnchor = styled.a<StyledAnchorProps>``;\n\n// Standard variant styling\nexport const StandardAnchor = styled(BaseAnchor)<StyledAnchorProps>`\n  display: inline-flex;\n  align-items: center;\n\n  cursor: pointer;\n  transition: color 0.1s ease;\n  text-decoration: none;\n  padding: 0 2px;\n\n  ${({ size }) => getTextStyles(theme.text[styleMappings[size]])};\n\n  &:focus {\n    outline: 0;\n    border-color: ${theme.colors.secondary.blue.dark};\n    border-radius: ${theme.radius.base};\n    box-shadow: 0 0 0 2px ${theme.colors.secondary.blue.light};\n  }\n\n  &:hover {\n    color: ${theme.colors.secondary.blue.dark};\n  }\n\n  svg {\n    width: ${({ size }) => sizeMappings[size]};\n    height: ${({ size }) => sizeMappings[size]};\n    vertical-align: middle;\n  }\n`;\n\n// Unstyled variant with minimal styling\nexport const UnstyledAnchor = styled(BaseAnchor)<StyledAnchorProps>``;\n"],"names":["theme","styled","getTextStyles"],"mappings":";;;;;;;;;;AASA,MAAM,YAAY,GAA8C;AAC9D,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,EAAE;AAClB,IAAA,EAAE,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;AAClB,IAAA,IAAI,EAAEA,WAAK,CAAC,KAAK,CAAC,IAAI;AACtB,IAAA,KAAK,EAAEA,WAAK,CAAC,KAAK,CAAC,CAAC,CAAC;CACtB;AAED,MAAM,aAAa,GAA8C;AAC/D,IAAA,EAAE,EAAE,WAAW;AACf,IAAA,EAAE,EAAE,YAAY;AAChB,IAAA,IAAI,EAAE,MAAM;AACZ,IAAA,KAAK,EAAE,WAAW;CACnB;MAEY,UAAU,GAAGC,uBAAM,CAAC,CAAC;AAElC;AACa,MAAA,cAAc,GAAGA,uBAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,cAAA,EAAA,CAAA,CAAA,CAAA,oHAAA,EAS5C,CAAC,EAAE,IAAI,EAAE,KAAKC,mBAAa,CAACF,WAAK,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC,CAAC,CAAA,gCAAA,EAI5CA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,kBAC/BA,WAAK,CAAC,MAAM,CAAC,IAAI,CACV,sBAAA,EAAAA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,KAAK,CAAA,gBAAA,EAIhDA,WAAK,CAAC,MAAM,CAAC,SAAS,CAAC,IAAI,CAAC,IAAI,eAIhC,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC,WAC/B,CAAC,EAAE,IAAI,EAAE,KAAK,YAAY,CAAC,IAAI,CAAC;AAK9C;MACa,cAAc,GAAGC,uBAAM,CAAC,UAAU,CAAC,CAAA,UAAA,CAAA,EAAA,WAAA,EAAA,qBAAA,EAAA,WAAA,EAAA,aAAA,EAAA,CAAA,CAAA,CAAA;;;;;;"}

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

@@ -1 +1,8 @@
-export declare const CommonAnchor: import("styled-components").StyledComponent<"a", any, {}, never>;
+import { AnchorSize } from './types';
+type StyledAnchorProps = {
+    size: AnchorSize;
+};
+export declare const BaseAnchor: import("styled-components").StyledComponent<"a", any, StyledAnchorProps, never>;
+export declare const StandardAnchor: import("styled-components").StyledComponent<"a", any, StyledAnchorProps, never>;
+export declare const UnstyledAnchor: import("styled-components").StyledComponent<"a", any, StyledAnchorProps, never>;
+export {};