@jamesodwyer/gds-figma-vite 1.0.0

package/dist/index532.js

@@ -0,0 +1,75 @@
+import styled, { css } from "styled-components";
+import { buttonreset, visuallyhidden } from "./index120.js";
+import { spacing } from "./index522.js";
+import { iconSize } from "./index521.js";
+import ExclamationMarkCircledFilledIcon from "./index186.js";
+import CheckmarkCircledFilledIcon from "./index163.js";
+import InfoICircledFilledIcon from "./index206.js";
+const itemBorderRadius = "4px";
+const Item = styled.div.withConfig({
+  displayName: "indexstyles__Item",
+  componentId: "sc-1u4393p-0"
+})(["flex-shrink:0;width:100%;overflow:hidden;"]);
+const variants = {
+  info: css(["color:", ";background-color:", ";"], (props) => props.theme.text.inverse, (props) => props.theme.status.default),
+  success: css(["color:", ";background-color:", ";"], (props) => props.theme.text.inverse, (props) => props.theme.status.success),
+  warning: css(["color:", ";background-color:", ";"], (props) => props.theme.text.primary, (props) => props.theme.status.warning),
+  danger: css(["color:", ";background-color:", ";"], (props) => props.theme.text.inverse, (props) => props.theme.status.danger)
+};
+const alertType = ({
+  $variant
+}) => variants[$variant];
+const titleWrapperRadius = ({
+  $isTitleOnly
+}) => $isTitleOnly ? css(["border-radius:", ";"], itemBorderRadius) : css(["border-radius:", " ", " 0 0;"], itemBorderRadius, itemBorderRadius);
+const TitleWrapper = styled.div.withConfig({
+  displayName: "indexstyles__TitleWrapper",
+  componentId: "sc-1u4393p-1"
+})(["", ";", ";position:relative;display:flex;align-items:center;justify-content:space-between;padding:", " ", ";"], titleWrapperRadius, alertType, ({
+  $size
+}) => spacing[$size], spacing.auditorium);
+const Title = styled.div.withConfig({
+  displayName: "indexstyles__Title",
+  componentId: "sc-1u4393p-2"
+})(["display:flex;align-items:center;font-weight:600;"]);
+const iconStyles = css(["align-self:flex-start;margin-inline-end:", ";"], iconSize.margin);
+const InfoICircledFilled = styled(InfoICircledFilledIcon).withConfig({
+  displayName: "indexstyles__InfoICircledFilled",
+  componentId: "sc-1u4393p-3"
+})(["", ";"], iconStyles);
+const ExclamationMarkCircledFilled = styled(ExclamationMarkCircledFilledIcon).withConfig({
+  displayName: "indexstyles__ExclamationMarkCircledFilled",
+  componentId: "sc-1u4393p-4"
+})(["", ";"], iconStyles);
+const CheckmarkCircledFilled = styled(CheckmarkCircledFilledIcon).withConfig({
+  displayName: "indexstyles__CheckmarkCircledFilled",
+  componentId: "sc-1u4393p-5"
+})(["", ";"], iconStyles);
+const DismissButton = styled.button.withConfig({
+  displayName: "indexstyles__DismissButton",
+  componentId: "sc-1u4393p-6"
+})(["", ";"], buttonreset);
+const DismissA11yLabel = styled.span.withConfig({
+  displayName: "indexstyles__DismissA11yLabel",
+  componentId: "sc-1u4393p-7"
+})(["", ";"], visuallyhidden);
+const Message = styled.div.withConfig({
+  displayName: "indexstyles__Message",
+  componentId: "sc-1u4393p-8"
+})(["padding-top:", ";padding-inline-end:", ";padding-bottom:", ";padding-inline-start:calc( ", " + ", " + ", " );border-color:", ";border-style:solid;border-width:0 1px 1px;border-radius:0 0 ", " ", ";text-align:start;background-color:", ";& > :first-child{margin-top:0;}& > :last-child{margin-bottom:0;}"], ({
+  $size
+}) => spacing[$size], spacing.auditorium, ({
+  $size
+}) => spacing[$size], iconSize.viewBox, iconSize.margin, spacing.auditorium, (props) => props.theme.base.border, itemBorderRadius, itemBorderRadius, (props) => props.theme.base.bg);
+export {
+  CheckmarkCircledFilled,
+  DismissA11yLabel,
+  DismissButton,
+  ExclamationMarkCircledFilled,
+  InfoICircledFilled,
+  Item,
+  Message,
+  Title,
+  TitleWrapper
+};
+//# sourceMappingURL=index532.js.map

package/dist/index532.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index532.js","sources":["../src/components/AlertBoxLegacy/index.styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport { spacing, iconSize } from \"../../dimensions\";\nimport { buttonreset, visuallyhidden } from \"../../utils/snippets\";\nimport {\n  InfoICircledFilledIcon as InfoICircledFilledBase,\n  ExclamationMarkCircledFilledIcon as ExclamationMarkCircledFilledBase,\n  CheckmarkCircledFilledIcon as CheckmarkCircledFilledBase,\n} from \"../../icons\";\n\nconst itemBorderRadius = \"4px\";\n\nexport const Item = styled.div`\n  flex-shrink: 0;\n\n  width: 100%;\n  overflow: hidden;\n`;\n\nconst variants = {\n  info: css`\n    color: ${(props) => props.theme.text.inverse};\n    background-color: ${(props) => props.theme.status.default};\n  `,\n  success: css`\n    color: ${(props) => props.theme.text.inverse};\n    background-color: ${(props) => props.theme.status.success};\n  `,\n  warning: css`\n    color: ${(props) => props.theme.text.primary};\n    background-color: ${(props) => props.theme.status.warning};\n  `,\n  danger: css`\n    color: ${(props) => props.theme.text.inverse};\n    background-color: ${(props) => props.theme.status.danger};\n  `,\n};\n\nconst alertType = ({ $variant }: { $variant: keyof typeof variants }) =>\n  variants[$variant];\n\nconst titleWrapperRadius = ({ $isTitleOnly }: { $isTitleOnly?: boolean }) =>\n  $isTitleOnly\n    ? css`\n        border-radius: ${itemBorderRadius};\n      `\n    : css`\n        border-radius: ${itemBorderRadius} ${itemBorderRadius} 0 0;\n      `;\n\nexport const TitleWrapper = styled.div<{\n  $variant: keyof typeof variants;\n  $size: keyof typeof spacing;\n  $isTitleOnly?: boolean;\n}>`\n  ${titleWrapperRadius};\n  ${alertType};\n\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n\n  padding: ${({ $size }) => spacing[$size]} ${spacing.auditorium};\n`;\n\nexport const Title = styled.div`\n  display: flex;\n  align-items: center;\n  font-weight: 600;\n`;\n\nconst iconStyles = css`\n  align-self: flex-start;\n  margin-inline-end: ${iconSize.margin};\n`;\n\nexport const InfoICircledFilled = styled(InfoICircledFilledBase)`\n  ${iconStyles};\n`;\n\nexport const ExclamationMarkCircledFilled = styled(\n  ExclamationMarkCircledFilledBase,\n)`\n  ${iconStyles};\n`;\n\nexport const CheckmarkCircledFilled = styled(CheckmarkCircledFilledBase)`\n  ${iconStyles};\n`;\n\nexport const DismissButton = styled.button`\n  ${buttonreset};\n`;\n\nexport const DismissA11yLabel = styled.span`\n  ${visuallyhidden};\n`;\n\nexport const Message = styled.div<{ $size: keyof typeof spacing }>`\n  /* top and bottom padding adjustable with size prop, left padding to align message text with AlertBox title */\n  padding-top: ${({ $size }) => spacing[$size]};\n  padding-inline-end: ${spacing.auditorium};\n  padding-bottom: ${({ $size }) => spacing[$size]};\n  padding-inline-start: calc(\n    ${iconSize.viewBox} + ${iconSize.margin} + ${spacing.auditorium}\n  );\n\n  border-color: ${(props) => props.theme.base.border};\n  border-style: solid;\n  border-width: 0 1px 1px;\n  border-radius: 0 0 ${itemBorderRadius} ${itemBorderRadius};\n  text-align: start;\n  background-color: ${(props) => props.theme.base.bg};\n  /*\n  Direct descendant selector needed for some reason. Without it, we seem to \n  remove the space, resulting in the styles being applied to \n  .MessageClassName:first-child / .MessageClassName:last-child. Weird. \n  Can't reproduce with a standard styled-components build either: \n  https://codesandbox.io/embed/styled-components-53s90\n  */\n  & > :first-child {\n    margin-top: 0;\n  }\n\n  & > :last-child {\n    margin-bottom: 0;\n  }\n`;\n"],"names":["itemBorderRadius","Item","styled","div","withConfig","displayName","componentId","variants","info","css","props","theme","text","inverse","status","default","success","warning","primary","danger","alertType","$variant","titleWrapperRadius","$isTitleOnly","TitleWrapper","$size","spacing","auditorium","Title","iconStyles","iconSize","margin","InfoICircledFilled","InfoICircledFilledBase","ExclamationMarkCircledFilled","ExclamationMarkCircledFilledBase","CheckmarkCircledFilled","CheckmarkCircledFilledBase","DismissButton","button","buttonreset","DismissA11yLabel","span","visuallyhidden","Message","viewBox","base","border","bg"],"mappings":"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"}

package/dist/index533.cjs

@@ -0,0 +1,113 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const snippets = require("./index120.cjs");
+const modifiers = require("./index528.cjs");
+const spacing = require("./index522.cjs");
+const sizes = require("./index521.cjs");
+const typography = require("./index520.cjs");
+const variantStyles = ({
+  $fillVariant,
+  $colorVariant,
+  theme
+}) => {
+  const fg = theme._buttons[$colorVariant].color;
+  const bg = theme._buttons[$colorVariant].backgroundColor;
+  if ($colorVariant === "inverse") {
+    return styled.css(["border-color:", ";color:", ";background-color:transparent;"], bg, bg);
+  }
+  switch ($fillVariant) {
+    case "outline":
+      return styled.css(["border-color:", ";color:", ";background-color:transparent;"], $colorVariant === "tertiary" ? modifiers.muted(bg) : bg, bg);
+    case "ghost":
+      return styled.css(["border-color:transparent;color:", ";background-color:transparent;@media (-ms-high-contrast:active),(forced-colors:active){padding-inline-end:", ";padding-inline-start:", ";}"], bg, spacing.spacing.amphitheatre, spacing.spacing.amphitheatre);
+    case "fill":
+    default:
+      return styled.css(["border-color:transparent;color:", ";background-color:", ";"], fg, bg);
+  }
+};
+const hoverStyles = ({
+  $fillVariant,
+  $colorVariant,
+  theme
+}) => {
+  const fg = theme._buttons[$colorVariant].color;
+  const bg = theme._buttons[$colorVariant].backgroundColor;
+  const darkBg = modifiers.dark(bg);
+  if ($colorVariant === "inverse") {
+    return styled.css(["color:", ";background-color:", ";"], fg, bg);
+  }
+  switch ($fillVariant) {
+    case "outline":
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], darkBg, fg, darkBg);
+    case "ghost":
+      return styled.css(["color:", ";background-color:", ";"], darkBg, modifiers.weakest(modifiers.light(bg)));
+    case "fill":
+    default:
+      return styled.css(["border-color:", ";color:", ";background-color:", ";"], darkBg, fg, darkBg);
+  }
+};
+const fontSize = styled.css(["font-size:", "px;"], (props) => {
+  return props.$colorVariant === "transaction" ? props.theme.fontSizes[3] : props.theme.fontSizes[2];
+});
+const buttonActiveStyles = ({
+  $colorVariant,
+  $fillVariant,
+  theme
+}) => {
+  const fg = theme._buttons[$colorVariant].color;
+  const bg = theme._buttons[$colorVariant].backgroundColor;
+  const getColor = () => {
+    if ($colorVariant === "inverse") {
+      return bg;
+    }
+    if ($fillVariant === "ghost") {
+      return fg;
+    }
+    return;
+  };
+  const activeColor = $colorVariant === "transaction" ? theme._buttons["transaction"].backgroundColor : theme._buttons["primary"].backgroundColor;
+  return styled.css(["border-color:", ";color:", ";background-color:", ";"], modifiers.darker(activeColor), getColor(), modifiers.darker(activeColor));
+};
+const buttonDisabledStyles = (props) => {
+  const {
+    $colorVariant,
+    $fillVariant
+  } = props;
+  const getDisabledGhostStyles = () => {
+    return styled.css(["border-color:transparent;color:", ";background-color:transparent;cursor:not-allowed;"], props.theme._buttons.disabled.color);
+  };
+  const getDisabledOutlineStyles = () => {
+    return styled.css(["border-color:", ";color:", ";background-color:transparent;cursor:not-allowed;"], props.theme._buttons.disabled.color, props.theme._buttons.disabled.color);
+  };
+  if ($fillVariant === "ghost") {
+    return getDisabledGhostStyles();
+  }
+  if ($fillVariant === "outline") {
+    return getDisabledOutlineStyles();
+  }
+  switch ($colorVariant) {
+    case "inverse":
+      return styled.css(["opacity:0.6;"]);
+    default:
+      return styled.css(["border-color:", ";color:", ";background-color:", ";cursor:not-allowed;"], props.theme._buttons.disabled.backgroundColor, props.theme._buttons.disabled.color, props.theme._buttons.disabled.backgroundColor);
+  }
+};
+const baseButtonStyles = styled.css(["", ";", ";position:relative;display:inline-block;width:", ";min-height:", ";padding:", " ", ";border-style:solid;border-width:1px;border-radius:4px;font-weight:600;", " line-height:", ";white-space:nowrap;text-align:center;text-wrap:auto;@supports (text-wrap:pretty){text-wrap:pretty;}transition:background-color 0.2s;&:disabled{", "}&:not(:disabled){cursor:", ";}&:focus{outline-offset:4px;}&:not(:disabled):hover{", "}&:not(:disabled):active{", "}"], snippets.buttonreset, variantStyles, (props) => props.$fullWidth === true ? "100%" : "auto", sizes.minTapSize, spacing.spacing.club, spacing.spacing.auditorium, fontSize, typography.lineHeight.default, buttonDisabledStyles, (props) => props.$showLoadingState ? "wait" : "pointer", (props) => !props.$showLoadingState && hoverStyles, (props) => !props.$showLoadingState && buttonActiveStyles);
+const linkStyles = styled.css(['display:inline-flex;align-items:center;justify-content:center;text-decoration:none;&:hover,&:focus{text-decoration:none;}&[aria-disabled="true"]{', ";&:focus,&:hover{", "}}"], buttonDisabledStyles, buttonDisabledStyles);
+const StyledButton = styled.button.withConfig({
+  displayName: "indexstyles__StyledButton",
+  componentId: "sc-1b9zirw-0"
+})(["", ";", ";"], baseButtonStyles, (props) => !props.type && linkStyles);
+const FlexWrapper = styled.span.withConfig({
+  displayName: "indexstyles__FlexWrapper",
+  componentId: "sc-1b9zirw-1"
+})(["display:flex;gap:", ";align-items:center;justify-content:center;visibility:", ";"], spacing.spacing.club, (props) => props.$isLoading ? "hidden" : "visible");
+const LoadingContainer = styled.span.withConfig({
+  displayName: "indexstyles__LoadingContainer",
+  componentId: "sc-1b9zirw-2"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);
+exports.FlexWrapper = FlexWrapper;
+exports.LoadingContainer = LoadingContainer;
+exports.StyledButton = StyledButton;
+//# sourceMappingURL=index533.cjs.map

package/dist/index533.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index533.cjs","sources":["../src/components/Button/index.styles.ts"],"sourcesContent":["import styled, { css, DefaultTheme } from \"styled-components\";\nimport { Buttons } from \"../../themes/types\";\nimport { dark } from \"../../colors\";\nimport { buttonreset } from \"../../utils/snippets\";\nimport { lineHeight, minTapSize, spacing } from \"../../dimensions\";\nimport { darker, muted, light, weakest } from \"../../colors/modifiers\";\n\nexport type ColorVariant = keyof Buttons;\nexport type FillVariant = \"fill\" | \"outline\" | \"ghost\";\n\ntype Props = {\n  $fullWidth?: boolean;\n  $colorVariant: ColorVariant;\n  $fillVariant?: FillVariant;\n  $showLoadingState?: boolean;\n};\n\ntype PropsAndTheme = Props & {\n  theme: DefaultTheme;\n};\n\nconst variantStyles = ({\n  $fillVariant,\n  $colorVariant,\n  theme,\n}: PropsAndTheme) => {\n  const fg = theme._buttons[$colorVariant].color;\n  const bg = theme._buttons[$colorVariant].backgroundColor;\n\n  // inverse colorVariant overrides any fillVariant\n  if ($colorVariant === \"inverse\") {\n    return css`\n      border-color: ${bg};\n      color: ${bg};\n      background-color: transparent;\n    `;\n  }\n\n  switch ($fillVariant) {\n    case \"outline\":\n      return css`\n        border-color: ${$colorVariant === \"tertiary\" ? muted(bg) : bg};\n        color: ${bg};\n        background-color: transparent;\n      `;\n\n    case \"ghost\":\n      return css`\n        border-color: transparent;\n        color: ${bg};\n        background-color: transparent;\n\n        /**\n        Force extra horizontal padding for high-contrast mode because the \n        transparent borders become visible and we don't want them touching the \n        text\n        */\n        @media (-ms-high-contrast: active), (forced-colors: active) {\n          padding-inline-end: ${spacing.amphitheatre};\n          padding-inline-start: ${spacing.amphitheatre};\n        }\n      `;\n\n    case \"fill\":\n    default:\n      return css`\n        border-color: transparent;\n        color: ${fg};\n        background-color: ${bg};\n      `;\n  }\n};\n\nconst hoverStyles = ({ $fillVariant, $colorVariant, theme }: PropsAndTheme) => {\n  const fg = theme._buttons[$colorVariant].color;\n  const bg = theme._buttons[$colorVariant].backgroundColor;\n  const darkBg = dark(bg);\n\n  // inverse colorVariant overrides any fillVariant\n  if ($colorVariant === \"inverse\") {\n    return css`\n      color: ${fg};\n      background-color: ${bg};\n    `;\n  }\n\n  switch ($fillVariant) {\n    case \"outline\":\n      return css`\n        border-color: ${darkBg};\n        color: ${fg};\n        background-color: ${darkBg};\n      `;\n\n    case \"ghost\":\n      return css`\n        color: ${darkBg};\n        background-color: ${weakest(light(bg))};\n      `;\n\n    case \"fill\":\n    default:\n      return css`\n        border-color: ${darkBg};\n        color: ${fg};\n        background-color: ${darkBg};\n      `;\n  }\n};\n\nconst fontSize = css<Props>`\n  font-size: ${(props) => {\n    // Designs have different font sizes for the \"Transactional\" buttons\n    // This is for accessibility reasons as white text on green background is slightly\n    // harder to read, so we make the text a bit bigger to mitigate that.\n    return props.$colorVariant === \"transaction\"\n      ? props.theme.fontSizes[3]\n      : props.theme.fontSizes[2];\n  }}px;\n`;\n\nconst buttonActiveStyles = ({\n  $colorVariant,\n  $fillVariant,\n  theme,\n}: PropsAndTheme) => {\n  const fg = theme._buttons[$colorVariant].color;\n  const bg = theme._buttons[$colorVariant].backgroundColor;\n\n  const getColor = () => {\n    if ($colorVariant === \"inverse\") {\n      return bg;\n    }\n\n    if ($fillVariant === \"ghost\") {\n      return fg;\n    }\n\n    return;\n  };\n\n  const activeColor =\n    $colorVariant === \"transaction\"\n      ? theme._buttons[\"transaction\"].backgroundColor\n      : theme._buttons[\"primary\"].backgroundColor;\n\n  return css`\n    border-color: ${darker(activeColor)};\n    color: ${getColor()};\n    background-color: ${darker(activeColor)};\n  `;\n};\n\nconst buttonDisabledStyles = (props: PropsAndTheme) => {\n  const { $colorVariant, $fillVariant } = props;\n\n  const getDisabledGhostStyles = () => {\n    return css`\n      border-color: transparent;\n      color: ${props.theme._buttons.disabled.color};\n      background-color: transparent;\n      cursor: not-allowed;\n    `;\n  };\n\n  const getDisabledOutlineStyles = () => {\n    return css`\n      border-color: ${props.theme._buttons.disabled.color};\n      color: ${props.theme._buttons.disabled.color};\n      background-color: transparent;\n      cursor: not-allowed;\n    `;\n  };\n\n  if ($fillVariant === \"ghost\") {\n    return getDisabledGhostStyles();\n  }\n\n  if ($fillVariant === \"outline\") {\n    return getDisabledOutlineStyles();\n  }\n\n  switch ($colorVariant) {\n    case \"inverse\":\n      return css`\n        opacity: 0.6;\n      `;\n\n    default:\n      return css`\n        border-color: ${props.theme._buttons.disabled.backgroundColor};\n        color: ${props.theme._buttons.disabled.color};\n        background-color: ${props.theme._buttons.disabled.backgroundColor};\n        cursor: not-allowed;\n      `;\n  }\n};\n\nconst baseButtonStyles = css<Props>`\n  ${buttonreset};\n  ${variantStyles};\n  position: relative;\n  display: inline-block;\n  width: ${(props) => (props.$fullWidth === true ? \"100%\" : \"auto\")};\n  min-height: ${minTapSize};\n  padding: ${spacing.club} ${spacing.auditorium};\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 4px;\n  font-weight: 600;\n  ${fontSize}\n  line-height: ${lineHeight.default};\n  white-space: nowrap;\n  text-align: center;\n  text-wrap: auto;\n  @supports (text-wrap: pretty) {\n    text-wrap: pretty;\n  }\n  transition: background-color 0.2s;\n\n  &:disabled {\n    ${buttonDisabledStyles}\n  }\n\n  &:not(:disabled) {\n    cursor: ${(props) => (props.$showLoadingState ? \"wait\" : \"pointer\")};\n  }\n\n  &:focus {\n    outline-offset: 4px;\n  }\n\n  &:not(:disabled):hover {\n    ${(props) => !props.$showLoadingState && hoverStyles}\n  }\n\n  &:not(:disabled):active {\n    ${(props) => !props.$showLoadingState && buttonActiveStyles}\n  }\n`;\n\nconst linkStyles = css`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n\n  &:hover,\n  &:focus {\n    text-decoration: none;\n  }\n\n  &[aria-disabled=\"true\"] {\n    ${buttonDisabledStyles};\n\n    &:focus,\n    &:hover {\n      ${buttonDisabledStyles}\n    }\n  }\n`;\n\nexport const StyledButton = styled.button<Props>`\n  ${baseButtonStyles};\n\n  /* Apply link styles if there is no button type applied */\n  ${(props) => !props.type && linkStyles};\n`;\n\nexport const FlexWrapper = styled.span<{ $isLoading?: boolean }>`\n  display: flex;\n  gap: ${spacing.club};\n  align-items: center;\n  justify-content: center;\n\n  /* While loading, we want to hide the content without affecting the width of the button */\n  visibility: ${(props) => (props.$isLoading ? \"hidden\" : \"visible\")};\n`;\n\nexport const LoadingContainer = styled.span`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n"],"names":["variantStyles","$fillVariant","$colorVariant","theme","fg","_buttons","color","bg","backgroundColor","css","muted","spacing","amphitheatre","hoverStyles","darkBg","dark","weakest","light","fontSize","props","fontSizes","buttonActiveStyles","getColor","activeColor","darker","buttonDisabledStyles","getDisabledGhostStyles","disabled","getDisabledOutlineStyles","baseButtonStyles","buttonreset","$fullWidth","minTapSize","club","auditorium","lineHeight","default","$showLoadingState","linkStyles","StyledButton","styled","button","withConfig","displayName","componentId","type","FlexWrapper","span","$isLoading","LoadingContainer"],"mappings":"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"}

package/dist/index533.js

@@ -0,0 +1,113 @@
+import styled, { css } from "styled-components";
+import { buttonreset } from "./index120.js";
+import { muted, dark, weakest, light, darker } from "./index528.js";
+import { spacing } from "./index522.js";
+import { minTapSize } from "./index521.js";
+import { lineHeight } from "./index520.js";
+const variantStyles = ({
+  $fillVariant,
+  $colorVariant,
+  theme
+}) => {
+  const fg = theme._buttons[$colorVariant].color;
+  const bg = theme._buttons[$colorVariant].backgroundColor;
+  if ($colorVariant === "inverse") {
+    return css(["border-color:", ";color:", ";background-color:transparent;"], bg, bg);
+  }
+  switch ($fillVariant) {
+    case "outline":
+      return css(["border-color:", ";color:", ";background-color:transparent;"], $colorVariant === "tertiary" ? muted(bg) : bg, bg);
+    case "ghost":
+      return css(["border-color:transparent;color:", ";background-color:transparent;@media (-ms-high-contrast:active),(forced-colors:active){padding-inline-end:", ";padding-inline-start:", ";}"], bg, spacing.amphitheatre, spacing.amphitheatre);
+    case "fill":
+    default:
+      return css(["border-color:transparent;color:", ";background-color:", ";"], fg, bg);
+  }
+};
+const hoverStyles = ({
+  $fillVariant,
+  $colorVariant,
+  theme
+}) => {
+  const fg = theme._buttons[$colorVariant].color;
+  const bg = theme._buttons[$colorVariant].backgroundColor;
+  const darkBg = dark(bg);
+  if ($colorVariant === "inverse") {
+    return css(["color:", ";background-color:", ";"], fg, bg);
+  }
+  switch ($fillVariant) {
+    case "outline":
+      return css(["border-color:", ";color:", ";background-color:", ";"], darkBg, fg, darkBg);
+    case "ghost":
+      return css(["color:", ";background-color:", ";"], darkBg, weakest(light(bg)));
+    case "fill":
+    default:
+      return css(["border-color:", ";color:", ";background-color:", ";"], darkBg, fg, darkBg);
+  }
+};
+const fontSize = css(["font-size:", "px;"], (props) => {
+  return props.$colorVariant === "transaction" ? props.theme.fontSizes[3] : props.theme.fontSizes[2];
+});
+const buttonActiveStyles = ({
+  $colorVariant,
+  $fillVariant,
+  theme
+}) => {
+  const fg = theme._buttons[$colorVariant].color;
+  const bg = theme._buttons[$colorVariant].backgroundColor;
+  const getColor = () => {
+    if ($colorVariant === "inverse") {
+      return bg;
+    }
+    if ($fillVariant === "ghost") {
+      return fg;
+    }
+    return;
+  };
+  const activeColor = $colorVariant === "transaction" ? theme._buttons["transaction"].backgroundColor : theme._buttons["primary"].backgroundColor;
+  return css(["border-color:", ";color:", ";background-color:", ";"], darker(activeColor), getColor(), darker(activeColor));
+};
+const buttonDisabledStyles = (props) => {
+  const {
+    $colorVariant,
+    $fillVariant
+  } = props;
+  const getDisabledGhostStyles = () => {
+    return css(["border-color:transparent;color:", ";background-color:transparent;cursor:not-allowed;"], props.theme._buttons.disabled.color);
+  };
+  const getDisabledOutlineStyles = () => {
+    return css(["border-color:", ";color:", ";background-color:transparent;cursor:not-allowed;"], props.theme._buttons.disabled.color, props.theme._buttons.disabled.color);
+  };
+  if ($fillVariant === "ghost") {
+    return getDisabledGhostStyles();
+  }
+  if ($fillVariant === "outline") {
+    return getDisabledOutlineStyles();
+  }
+  switch ($colorVariant) {
+    case "inverse":
+      return css(["opacity:0.6;"]);
+    default:
+      return css(["border-color:", ";color:", ";background-color:", ";cursor:not-allowed;"], props.theme._buttons.disabled.backgroundColor, props.theme._buttons.disabled.color, props.theme._buttons.disabled.backgroundColor);
+  }
+};
+const baseButtonStyles = css(["", ";", ";position:relative;display:inline-block;width:", ";min-height:", ";padding:", " ", ";border-style:solid;border-width:1px;border-radius:4px;font-weight:600;", " line-height:", ";white-space:nowrap;text-align:center;text-wrap:auto;@supports (text-wrap:pretty){text-wrap:pretty;}transition:background-color 0.2s;&:disabled{", "}&:not(:disabled){cursor:", ";}&:focus{outline-offset:4px;}&:not(:disabled):hover{", "}&:not(:disabled):active{", "}"], buttonreset, variantStyles, (props) => props.$fullWidth === true ? "100%" : "auto", minTapSize, spacing.club, spacing.auditorium, fontSize, lineHeight.default, buttonDisabledStyles, (props) => props.$showLoadingState ? "wait" : "pointer", (props) => !props.$showLoadingState && hoverStyles, (props) => !props.$showLoadingState && buttonActiveStyles);
+const linkStyles = css(['display:inline-flex;align-items:center;justify-content:center;text-decoration:none;&:hover,&:focus{text-decoration:none;}&[aria-disabled="true"]{', ";&:focus,&:hover{", "}}"], buttonDisabledStyles, buttonDisabledStyles);
+const StyledButton = styled.button.withConfig({
+  displayName: "indexstyles__StyledButton",
+  componentId: "sc-1b9zirw-0"
+})(["", ";", ";"], baseButtonStyles, (props) => !props.type && linkStyles);
+const FlexWrapper = styled.span.withConfig({
+  displayName: "indexstyles__FlexWrapper",
+  componentId: "sc-1b9zirw-1"
+})(["display:flex;gap:", ";align-items:center;justify-content:center;visibility:", ";"], spacing.club, (props) => props.$isLoading ? "hidden" : "visible");
+const LoadingContainer = styled.span.withConfig({
+  displayName: "indexstyles__LoadingContainer",
+  componentId: "sc-1b9zirw-2"
+})(["position:absolute;inset:0;display:flex;align-items:center;justify-content:center;"]);
+export {
+  FlexWrapper,
+  LoadingContainer,
+  StyledButton
+};
+//# sourceMappingURL=index533.js.map

package/dist/index533.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index533.js","sources":["../src/components/Button/index.styles.ts"],"sourcesContent":["import styled, { css, DefaultTheme } from \"styled-components\";\nimport { Buttons } from \"../../themes/types\";\nimport { dark } from \"../../colors\";\nimport { buttonreset } from \"../../utils/snippets\";\nimport { lineHeight, minTapSize, spacing } from \"../../dimensions\";\nimport { darker, muted, light, weakest } from \"../../colors/modifiers\";\n\nexport type ColorVariant = keyof Buttons;\nexport type FillVariant = \"fill\" | \"outline\" | \"ghost\";\n\ntype Props = {\n  $fullWidth?: boolean;\n  $colorVariant: ColorVariant;\n  $fillVariant?: FillVariant;\n  $showLoadingState?: boolean;\n};\n\ntype PropsAndTheme = Props & {\n  theme: DefaultTheme;\n};\n\nconst variantStyles = ({\n  $fillVariant,\n  $colorVariant,\n  theme,\n}: PropsAndTheme) => {\n  const fg = theme._buttons[$colorVariant].color;\n  const bg = theme._buttons[$colorVariant].backgroundColor;\n\n  // inverse colorVariant overrides any fillVariant\n  if ($colorVariant === \"inverse\") {\n    return css`\n      border-color: ${bg};\n      color: ${bg};\n      background-color: transparent;\n    `;\n  }\n\n  switch ($fillVariant) {\n    case \"outline\":\n      return css`\n        border-color: ${$colorVariant === \"tertiary\" ? muted(bg) : bg};\n        color: ${bg};\n        background-color: transparent;\n      `;\n\n    case \"ghost\":\n      return css`\n        border-color: transparent;\n        color: ${bg};\n        background-color: transparent;\n\n        /**\n        Force extra horizontal padding for high-contrast mode because the \n        transparent borders become visible and we don't want them touching the \n        text\n        */\n        @media (-ms-high-contrast: active), (forced-colors: active) {\n          padding-inline-end: ${spacing.amphitheatre};\n          padding-inline-start: ${spacing.amphitheatre};\n        }\n      `;\n\n    case \"fill\":\n    default:\n      return css`\n        border-color: transparent;\n        color: ${fg};\n        background-color: ${bg};\n      `;\n  }\n};\n\nconst hoverStyles = ({ $fillVariant, $colorVariant, theme }: PropsAndTheme) => {\n  const fg = theme._buttons[$colorVariant].color;\n  const bg = theme._buttons[$colorVariant].backgroundColor;\n  const darkBg = dark(bg);\n\n  // inverse colorVariant overrides any fillVariant\n  if ($colorVariant === \"inverse\") {\n    return css`\n      color: ${fg};\n      background-color: ${bg};\n    `;\n  }\n\n  switch ($fillVariant) {\n    case \"outline\":\n      return css`\n        border-color: ${darkBg};\n        color: ${fg};\n        background-color: ${darkBg};\n      `;\n\n    case \"ghost\":\n      return css`\n        color: ${darkBg};\n        background-color: ${weakest(light(bg))};\n      `;\n\n    case \"fill\":\n    default:\n      return css`\n        border-color: ${darkBg};\n        color: ${fg};\n        background-color: ${darkBg};\n      `;\n  }\n};\n\nconst fontSize = css<Props>`\n  font-size: ${(props) => {\n    // Designs have different font sizes for the \"Transactional\" buttons\n    // This is for accessibility reasons as white text on green background is slightly\n    // harder to read, so we make the text a bit bigger to mitigate that.\n    return props.$colorVariant === \"transaction\"\n      ? props.theme.fontSizes[3]\n      : props.theme.fontSizes[2];\n  }}px;\n`;\n\nconst buttonActiveStyles = ({\n  $colorVariant,\n  $fillVariant,\n  theme,\n}: PropsAndTheme) => {\n  const fg = theme._buttons[$colorVariant].color;\n  const bg = theme._buttons[$colorVariant].backgroundColor;\n\n  const getColor = () => {\n    if ($colorVariant === \"inverse\") {\n      return bg;\n    }\n\n    if ($fillVariant === \"ghost\") {\n      return fg;\n    }\n\n    return;\n  };\n\n  const activeColor =\n    $colorVariant === \"transaction\"\n      ? theme._buttons[\"transaction\"].backgroundColor\n      : theme._buttons[\"primary\"].backgroundColor;\n\n  return css`\n    border-color: ${darker(activeColor)};\n    color: ${getColor()};\n    background-color: ${darker(activeColor)};\n  `;\n};\n\nconst buttonDisabledStyles = (props: PropsAndTheme) => {\n  const { $colorVariant, $fillVariant } = props;\n\n  const getDisabledGhostStyles = () => {\n    return css`\n      border-color: transparent;\n      color: ${props.theme._buttons.disabled.color};\n      background-color: transparent;\n      cursor: not-allowed;\n    `;\n  };\n\n  const getDisabledOutlineStyles = () => {\n    return css`\n      border-color: ${props.theme._buttons.disabled.color};\n      color: ${props.theme._buttons.disabled.color};\n      background-color: transparent;\n      cursor: not-allowed;\n    `;\n  };\n\n  if ($fillVariant === \"ghost\") {\n    return getDisabledGhostStyles();\n  }\n\n  if ($fillVariant === \"outline\") {\n    return getDisabledOutlineStyles();\n  }\n\n  switch ($colorVariant) {\n    case \"inverse\":\n      return css`\n        opacity: 0.6;\n      `;\n\n    default:\n      return css`\n        border-color: ${props.theme._buttons.disabled.backgroundColor};\n        color: ${props.theme._buttons.disabled.color};\n        background-color: ${props.theme._buttons.disabled.backgroundColor};\n        cursor: not-allowed;\n      `;\n  }\n};\n\nconst baseButtonStyles = css<Props>`\n  ${buttonreset};\n  ${variantStyles};\n  position: relative;\n  display: inline-block;\n  width: ${(props) => (props.$fullWidth === true ? \"100%\" : \"auto\")};\n  min-height: ${minTapSize};\n  padding: ${spacing.club} ${spacing.auditorium};\n  border-style: solid;\n  border-width: 1px;\n  border-radius: 4px;\n  font-weight: 600;\n  ${fontSize}\n  line-height: ${lineHeight.default};\n  white-space: nowrap;\n  text-align: center;\n  text-wrap: auto;\n  @supports (text-wrap: pretty) {\n    text-wrap: pretty;\n  }\n  transition: background-color 0.2s;\n\n  &:disabled {\n    ${buttonDisabledStyles}\n  }\n\n  &:not(:disabled) {\n    cursor: ${(props) => (props.$showLoadingState ? \"wait\" : \"pointer\")};\n  }\n\n  &:focus {\n    outline-offset: 4px;\n  }\n\n  &:not(:disabled):hover {\n    ${(props) => !props.$showLoadingState && hoverStyles}\n  }\n\n  &:not(:disabled):active {\n    ${(props) => !props.$showLoadingState && buttonActiveStyles}\n  }\n`;\n\nconst linkStyles = css`\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  text-decoration: none;\n\n  &:hover,\n  &:focus {\n    text-decoration: none;\n  }\n\n  &[aria-disabled=\"true\"] {\n    ${buttonDisabledStyles};\n\n    &:focus,\n    &:hover {\n      ${buttonDisabledStyles}\n    }\n  }\n`;\n\nexport const StyledButton = styled.button<Props>`\n  ${baseButtonStyles};\n\n  /* Apply link styles if there is no button type applied */\n  ${(props) => !props.type && linkStyles};\n`;\n\nexport const FlexWrapper = styled.span<{ $isLoading?: boolean }>`\n  display: flex;\n  gap: ${spacing.club};\n  align-items: center;\n  justify-content: center;\n\n  /* While loading, we want to hide the content without affecting the width of the button */\n  visibility: ${(props) => (props.$isLoading ? \"hidden\" : \"visible\")};\n`;\n\nexport const LoadingContainer = styled.span`\n  position: absolute;\n  inset: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n`;\n"],"names":["variantStyles","$fillVariant","$colorVariant","theme","fg","_buttons","color","bg","backgroundColor","css","muted","spacing","amphitheatre","hoverStyles","darkBg","dark","weakest","light","fontSize","props","fontSizes","buttonActiveStyles","getColor","activeColor","darker","buttonDisabledStyles","getDisabledGhostStyles","disabled","getDisabledOutlineStyles","baseButtonStyles","buttonreset","$fullWidth","minTapSize","club","auditorium","lineHeight","default","$showLoadingState","linkStyles","StyledButton","styled","button","withConfig","displayName","componentId","type","FlexWrapper","span","$isLoading","LoadingContainer"],"mappings":"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"}

package/dist/index534.cjs

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const styled = require("styled-components");
+const modifiers = require("./index528.cjs");
+const innerCircleSizes = {
+  small: "24px",
+  medium: "32px",
+  large: "72px"
+};
+const spin = styled.keyframes(["to{transform:rotate(360deg);}"]);
+const transitionTime = "0.75s";
+const Spinner = ({
+  size = "small",
+  colorVariant = "primary"
+}) => {
+  const theme = styled.useTheme();
+  const colors = {
+    primary: theme._links.primary.color,
+    // should update w co-branding
+    secondary: theme.text.primary,
+    inverse: theme.text.inverse
+  };
+  const spinnerColor = colors[colorVariant];
+  return /* @__PURE__ */ jsxRuntime.jsx(AnimatedSpinner, { $size: size, $spinnerColor: spinnerColor });
+};
+const AnimatedSpinner = styled.span.withConfig({
+  displayName: "Spinner__AnimatedSpinner",
+  componentId: "sc-us2hc3-0"
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:", ";height:", ";color:", ";&::before{position:absolute;display:block;width:100%;height:100%;border-color:", ";border-style:solid;border-width:calc(", " / 10);border-inline-start-color:", ";border-radius:50%;animation:", " ", ' linear infinite !important;content:"";}'], (props) => innerCircleSizes[props.$size], (props) => innerCircleSizes[props.$size], (props) => props.$spinnerColor, (props) => props.$spinnerColor, (props) => innerCircleSizes[props.$size], (props) => modifiers.weakest(props.$spinnerColor), spin, transitionTime);
+exports.Spinner = Spinner;
+//# sourceMappingURL=index534.cjs.map

package/dist/index534.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index534.cjs","sources":["../src/components/shared/Spinner.tsx"],"sourcesContent":["import React from \"react\";\nimport styled, { keyframes, useTheme } from \"styled-components\";\nimport { weakest } from \"../../colors\";\n\nconst innerCircleSizes = {\n  small: \"24px\",\n  medium: \"32px\",\n  large: \"72px\",\n} as const;\n\nconst spin = keyframes`\n  to {transform: rotate(360deg);}\n`;\n\nconst transitionTime = \"0.75s\";\n\nexport type Size = keyof typeof innerCircleSizes;\nexport type ColorVariant = \"primary\" | \"secondary\" | \"inverse\";\n\ntype Props = {\n  size?: Size;\n  colorVariant?: ColorVariant;\n};\n\n/** This Spinner is not exported for use by consumers, only used internally in GDS.\n * For a full-featured documented spinner, please use the LoadingSpinner component.\n */\nexport const Spinner = ({\n  size = \"small\",\n  colorVariant = \"primary\",\n}: Props) => {\n  const theme = useTheme();\n\n  const colors = {\n    primary: theme._links.primary.color, // should update w co-branding\n    secondary: theme.text.primary,\n    inverse: theme.text.inverse,\n  };\n\n  const spinnerColor = colors[colorVariant];\n\n  return <AnimatedSpinner $size={size} $spinnerColor={spinnerColor} />;\n};\n\nconst AnimatedSpinner = styled.span<{\n  $size: Size;\n  $spinnerColor: string;\n}>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${(props) => innerCircleSizes[props.$size]};\n  height: ${(props) => innerCircleSizes[props.$size]};\n  color: ${(props) => props.$spinnerColor};\n\n  &::before {\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-color: ${(props) => props.$spinnerColor};\n    border-style: solid;\n    border-width: calc(${(props) => innerCircleSizes[props.$size]} / 10);\n    border-inline-start-color: ${(props) => weakest(props.$spinnerColor)};\n    border-radius: 50%;\n\n    /* \n    We add important here so that the spinner still spins, even when the user prefers-reduced-motion\n    Classifying this as an essential animation: \n    https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html#dfn-essential */\n    animation: ${spin} ${transitionTime} linear infinite !important;\n    content: \"\";\n  }\n`;\n"],"names":["innerCircleSizes","small","medium","large","spin","keyframes","transitionTime","Spinner","size","colorVariant","theme","useTheme","colors","primary","_links","color","secondary","text","inverse","spinnerColor","jsx","AnimatedSpinner","styled","span","withConfig","displayName","componentId","props","$size","$spinnerColor","weakest"],"mappings":";;;;;AAIA,MAAMA,mBAAmB;AAAA,EACvBC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,OAAO;AACT;AAEA,MAAMC,OAAOC,OAAAA,UAAS,CAAA,+BAAA,CAAA;AAItB,MAAMC,iBAAiB;AAahB,MAAMC,UAAUA,CAAC;AAAA,EACtBC,OAAO;AAAA,EACPC,eAAe;AACV,MAAM;AACX,QAAMC,QAAQC,OAAAA,SAAAA;AAEd,QAAMC,SAAS;AAAA,IACbC,SAASH,MAAMI,OAAOD,QAAQE;AAAAA;AAAAA,IAC9BC,WAAWN,MAAMO,KAAKJ;AAAAA,IACtBK,SAASR,MAAMO,KAAKC;AAAAA,EAAAA;AAGtB,QAAMC,eAAeP,OAAOH,YAAY;AAExC,SAAOW,2BAAAA,IAAC,iBAAA,EAAgB,OAAOZ,MAAM,eAAeW,cAAa;AACnE;AAEA,MAAME,kBAAkBC,OAAOC,KAAIC,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,mFAAA,YAAA,WAAA,mFAAA,0CAAA,qCAAA,iCAAA,KAAA,0CAAA,GAQvBC,CAAAA,UAAU3B,iBAAiB2B,MAAMC,KAAK,GACrCD,CAAAA,UAAU3B,iBAAiB2B,MAAMC,KAAK,GACvCD,CAAAA,UAAUA,MAAME,eAOPF,CAAAA,UAAUA,MAAME,eAEXF,CAAAA,UAAU3B,iBAAiB2B,MAAMC,KAAK,GAC9BD,CAAAA,UAAUG,UAAAA,QAAQH,MAAME,aAAa,GAOtDzB,MAAQE,cAAc;;"}

package/dist/index534.js

@@ -0,0 +1,32 @@
+import { jsx } from "react/jsx-runtime";
+import styled, { useTheme, keyframes } from "styled-components";
+import { weakest } from "./index528.js";
+const innerCircleSizes = {
+  small: "24px",
+  medium: "32px",
+  large: "72px"
+};
+const spin = keyframes(["to{transform:rotate(360deg);}"]);
+const transitionTime = "0.75s";
+const Spinner = ({
+  size = "small",
+  colorVariant = "primary"
+}) => {
+  const theme = useTheme();
+  const colors = {
+    primary: theme._links.primary.color,
+    // should update w co-branding
+    secondary: theme.text.primary,
+    inverse: theme.text.inverse
+  };
+  const spinnerColor = colors[colorVariant];
+  return /* @__PURE__ */ jsx(AnimatedSpinner, { $size: size, $spinnerColor: spinnerColor });
+};
+const AnimatedSpinner = styled.span.withConfig({
+  displayName: "Spinner__AnimatedSpinner",
+  componentId: "sc-us2hc3-0"
+})(["position:relative;display:flex;align-items:center;justify-content:center;width:", ";height:", ";color:", ";&::before{position:absolute;display:block;width:100%;height:100%;border-color:", ";border-style:solid;border-width:calc(", " / 10);border-inline-start-color:", ";border-radius:50%;animation:", " ", ' linear infinite !important;content:"";}'], (props) => innerCircleSizes[props.$size], (props) => innerCircleSizes[props.$size], (props) => props.$spinnerColor, (props) => props.$spinnerColor, (props) => innerCircleSizes[props.$size], (props) => weakest(props.$spinnerColor), spin, transitionTime);
+export {
+  Spinner
+};
+//# sourceMappingURL=index534.js.map

package/dist/index534.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index534.js","sources":["../src/components/shared/Spinner.tsx"],"sourcesContent":["import React from \"react\";\nimport styled, { keyframes, useTheme } from \"styled-components\";\nimport { weakest } from \"../../colors\";\n\nconst innerCircleSizes = {\n  small: \"24px\",\n  medium: \"32px\",\n  large: \"72px\",\n} as const;\n\nconst spin = keyframes`\n  to {transform: rotate(360deg);}\n`;\n\nconst transitionTime = \"0.75s\";\n\nexport type Size = keyof typeof innerCircleSizes;\nexport type ColorVariant = \"primary\" | \"secondary\" | \"inverse\";\n\ntype Props = {\n  size?: Size;\n  colorVariant?: ColorVariant;\n};\n\n/** This Spinner is not exported for use by consumers, only used internally in GDS.\n * For a full-featured documented spinner, please use the LoadingSpinner component.\n */\nexport const Spinner = ({\n  size = \"small\",\n  colorVariant = \"primary\",\n}: Props) => {\n  const theme = useTheme();\n\n  const colors = {\n    primary: theme._links.primary.color, // should update w co-branding\n    secondary: theme.text.primary,\n    inverse: theme.text.inverse,\n  };\n\n  const spinnerColor = colors[colorVariant];\n\n  return <AnimatedSpinner $size={size} $spinnerColor={spinnerColor} />;\n};\n\nconst AnimatedSpinner = styled.span<{\n  $size: Size;\n  $spinnerColor: string;\n}>`\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: ${(props) => innerCircleSizes[props.$size]};\n  height: ${(props) => innerCircleSizes[props.$size]};\n  color: ${(props) => props.$spinnerColor};\n\n  &::before {\n    position: absolute;\n    display: block;\n    width: 100%;\n    height: 100%;\n    border-color: ${(props) => props.$spinnerColor};\n    border-style: solid;\n    border-width: calc(${(props) => innerCircleSizes[props.$size]} / 10);\n    border-inline-start-color: ${(props) => weakest(props.$spinnerColor)};\n    border-radius: 50%;\n\n    /* \n    We add important here so that the spinner still spins, even when the user prefers-reduced-motion\n    Classifying this as an essential animation: \n    https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions.html#dfn-essential */\n    animation: ${spin} ${transitionTime} linear infinite !important;\n    content: \"\";\n  }\n`;\n"],"names":["innerCircleSizes","small","medium","large","spin","keyframes","transitionTime","Spinner","size","colorVariant","theme","useTheme","colors","primary","_links","color","secondary","text","inverse","spinnerColor","AnimatedSpinner","styled","span","withConfig","displayName","componentId","props","$size","$spinnerColor","weakest"],"mappings":";;;AAIA,MAAMA,mBAAmB;AAAA,EACvBC,OAAO;AAAA,EACPC,QAAQ;AAAA,EACRC,OAAO;AACT;AAEA,MAAMC,OAAOC,UAAS,CAAA,+BAAA,CAAA;AAItB,MAAMC,iBAAiB;AAahB,MAAMC,UAAUA,CAAC;AAAA,EACtBC,OAAO;AAAA,EACPC,eAAe;AACV,MAAM;AACX,QAAMC,QAAQC,SAAAA;AAEd,QAAMC,SAAS;AAAA,IACbC,SAASH,MAAMI,OAAOD,QAAQE;AAAAA;AAAAA,IAC9BC,WAAWN,MAAMO,KAAKJ;AAAAA,IACtBK,SAASR,MAAMO,KAAKC;AAAAA,EAAAA;AAGtB,QAAMC,eAAeP,OAAOH,YAAY;AAExC,SAAO,oBAAC,iBAAA,EAAgB,OAAOD,MAAM,eAAeW,cAAa;AACnE;AAEA,MAAMC,kBAAkBC,OAAOC,KAAIC,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,mFAAA,YAAA,WAAA,mFAAA,0CAAA,qCAAA,iCAAA,KAAA,0CAAA,GAQvBC,CAAAA,UAAU1B,iBAAiB0B,MAAMC,KAAK,GACrCD,CAAAA,UAAU1B,iBAAiB0B,MAAMC,KAAK,GACvCD,CAAAA,UAAUA,MAAME,eAOPF,CAAAA,UAAUA,MAAME,eAEXF,CAAAA,UAAU1B,iBAAiB0B,MAAMC,KAAK,GAC9BD,CAAAA,UAAUG,QAAQH,MAAME,aAAa,GAOtDxB,MAAQE,cAAc;"}

package/dist/index535.cjs

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+function getButtonType(_props) {
+  const props = _props;
+  let type = void 0;
+  if ("type" in props) {
+    type = props.type;
+  } else if ("href" in props && props.href || props["aria-disabled"] === "true") ;
+  else {
+    type = "button";
+  }
+  return type;
+}
+exports.getButtonType = getButtonType;
+//# sourceMappingURL=index535.cjs.map

package/dist/index535.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index535.cjs","sources":["../src/utils/getButtonType.ts"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\n\ntype Props = Pick<ComponentPropsWithoutRef<\"button\">, \"type\"> &\n  Pick<ComponentPropsWithoutRef<\"a\">, \"href\" | \"aria-disabled\">;\n\nexport function getButtonType(_props: unknown) {\n  // I wasn't able to get TS to play ball here, so I had to use unknown and a type assertion\n  const props = _props as Props;\n\n  let type: Props[\"type\"] = undefined;\n\n  if (\"type\" in props) {\n    // If a type is explicitly provided we use that\n    type = props.type;\n  } else if (\n    (\"href\" in props && props.href) ||\n    props[\"aria-disabled\"] === \"true\"\n  ) {\n    // It's most likely a link so we don't add type=\"button\"\n  } else {\n    // It is most likely a button so we add type=\"button\"\n    type = \"button\";\n  }\n  return type;\n}\n"],"names":["getButtonType","_props","props","type","undefined","href"],"mappings":";;AAKO,SAASA,cAAcC,QAAiB;AAE7C,QAAMC,QAAQD;AAEd,MAAIE,OAAsBC;AAE1B,MAAI,UAAUF,OAAO;AAEnBC,WAAOD,MAAMC;AAAAA,EACf,WACG,UAAUD,SAASA,MAAMG,QAC1BH,MAAM,eAAe,MAAM,OAC3B;AAAA,OAEK;AAELC,WAAO;AAAA,EACT;AACA,SAAOA;AACT;;"}

package/dist/index535.js

@@ -0,0 +1,15 @@
+function getButtonType(_props) {
+  const props = _props;
+  let type = void 0;
+  if ("type" in props) {
+    type = props.type;
+  } else if ("href" in props && props.href || props["aria-disabled"] === "true") ;
+  else {
+    type = "button";
+  }
+  return type;
+}
+export {
+  getButtonType
+};
+//# sourceMappingURL=index535.js.map

package/dist/index535.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index535.js","sources":["../src/utils/getButtonType.ts"],"sourcesContent":["import { ComponentPropsWithoutRef } from \"react\";\n\ntype Props = Pick<ComponentPropsWithoutRef<\"button\">, \"type\"> &\n  Pick<ComponentPropsWithoutRef<\"a\">, \"href\" | \"aria-disabled\">;\n\nexport function getButtonType(_props: unknown) {\n  // I wasn't able to get TS to play ball here, so I had to use unknown and a type assertion\n  const props = _props as Props;\n\n  let type: Props[\"type\"] = undefined;\n\n  if (\"type\" in props) {\n    // If a type is explicitly provided we use that\n    type = props.type;\n  } else if (\n    (\"href\" in props && props.href) ||\n    props[\"aria-disabled\"] === \"true\"\n  ) {\n    // It's most likely a link so we don't add type=\"button\"\n  } else {\n    // It is most likely a button so we add type=\"button\"\n    type = \"button\";\n  }\n  return type;\n}\n"],"names":["getButtonType","_props","props","type","undefined","href"],"mappings":"AAKO,SAASA,cAAcC,QAAiB;AAE7C,QAAMC,QAAQD;AAEd,MAAIE,OAAsBC;AAE1B,MAAI,UAAUF,OAAO;AAEnBC,WAAOD,MAAMC;AAAAA,EACf,WACG,UAAUD,SAASA,MAAMG,QAC1BH,MAAM,eAAe,MAAM,OAC3B;AAAA,OAEK;AAELC,WAAO;AAAA,EACT;AACA,SAAOA;AACT;"}

package/dist/index536.cjs

@@ -0,0 +1,22 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const styled = require("styled-components");
+const elevation = require("./index524.cjs");
+const spacing = require("./index522.cjs");
+const typography = require("./index520.cjs");
+const Card = styled.div.withConfig({
+  displayName: "indexstyles__Card",
+  componentId: "sc-aoqj69-0"
+})(["", ";padding:", " ", ";border-radius:4px;background-color:", ";"], elevation.elevation.level1, spacing.spacing.arena, spacing.spacing.amphitheatre, (props) => props.theme.base.bg);
+const Title = styled.h2.withConfig({
+  displayName: "indexstyles__Title",
+  componentId: "sc-aoqj69-1"
+})(["", ";margin:0;line-height:1;"], typography.textStyle.fiji);
+const Body = styled.div.withConfig({
+  displayName: "indexstyles__Body",
+  componentId: "sc-aoqj69-2"
+})(["margin-top:", ";"], spacing.spacing.arena);
+exports.Body = Body;
+exports.Card = Card;
+exports.Title = Title;
+//# sourceMappingURL=index536.cjs.map

package/dist/index536.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index536.cjs","sources":["../src/components/Card/index.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { spacing, textStyle, elevation } from \"../../dimensions\";\n\nexport const Card = styled.div`\n  ${elevation.level1};\n  padding: ${spacing.arena} ${spacing.amphitheatre};\n  border-radius: 4px;\n  background-color: ${(props) => props.theme.base.bg};\n`;\n\nexport const Title = styled.h2`\n  ${textStyle.fiji};\n  margin: 0;\n  line-height: 1;\n`;\n\nexport const Body = styled.div`\n  margin-top: ${spacing.arena};\n`;\n"],"names":["Card","styled","div","withConfig","displayName","componentId","elevation","level1","spacing","arena","amphitheatre","props","theme","base","bg","Title","h2","textStyle","fiji","Body"],"mappings":";;;;;;AAGO,MAAMA,OAAOC,OAAOC,IAAGC,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,IAAA,aAAA,KAAA,wCAAA,GAAA,GAC1BC,oBAAUC,QACDC,QAAAA,QAAQC,OAASD,QAAAA,QAAQE,cAEfC,WAAUA,MAAMC,MAAMC,KAAKC,EAAE;AAG7C,MAAMC,QAAQd,OAAOe,GAAEb,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,IAAA,0BAAA,GAC1BY,WAAAA,UAAUC,IAAI;AAKX,MAAMC,OAAOlB,OAAOC,IAAGC,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,eAAA,GAAA,GACdG,QAAAA,QAAQC,KAAK;;;;"}

package/dist/index536.js

@@ -0,0 +1,22 @@
+import styled from "styled-components";
+import { elevation } from "./index524.js";
+import { spacing } from "./index522.js";
+import { textStyle } from "./index520.js";
+const Card = styled.div.withConfig({
+  displayName: "indexstyles__Card",
+  componentId: "sc-aoqj69-0"
+})(["", ";padding:", " ", ";border-radius:4px;background-color:", ";"], elevation.level1, spacing.arena, spacing.amphitheatre, (props) => props.theme.base.bg);
+const Title = styled.h2.withConfig({
+  displayName: "indexstyles__Title",
+  componentId: "sc-aoqj69-1"
+})(["", ";margin:0;line-height:1;"], textStyle.fiji);
+const Body = styled.div.withConfig({
+  displayName: "indexstyles__Body",
+  componentId: "sc-aoqj69-2"
+})(["margin-top:", ";"], spacing.arena);
+export {
+  Body,
+  Card,
+  Title
+};
+//# sourceMappingURL=index536.js.map

package/dist/index536.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index536.js","sources":["../src/components/Card/index.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { spacing, textStyle, elevation } from \"../../dimensions\";\n\nexport const Card = styled.div`\n  ${elevation.level1};\n  padding: ${spacing.arena} ${spacing.amphitheatre};\n  border-radius: 4px;\n  background-color: ${(props) => props.theme.base.bg};\n`;\n\nexport const Title = styled.h2`\n  ${textStyle.fiji};\n  margin: 0;\n  line-height: 1;\n`;\n\nexport const Body = styled.div`\n  margin-top: ${spacing.arena};\n`;\n"],"names":["Card","styled","div","withConfig","displayName","componentId","elevation","level1","spacing","arena","amphitheatre","props","theme","base","bg","Title","h2","textStyle","fiji","Body"],"mappings":";;;;AAGO,MAAMA,OAAOC,OAAOC,IAAGC,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,IAAA,aAAA,KAAA,wCAAA,GAAA,GAC1BC,UAAUC,QACDC,QAAQC,OAASD,QAAQE,cAEfC,WAAUA,MAAMC,MAAMC,KAAKC,EAAE;AAG7C,MAAMC,QAAQd,OAAOe,GAAEb,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,IAAA,0BAAA,GAC1BY,UAAUC,IAAI;AAKX,MAAMC,OAAOlB,OAAOC,IAAGC,WAAA;AAAA,EAAAC,aAAA;AAAA,EAAAC,aAAA;AAAA,CAAA,EAAA,CAAA,eAAA,GAAA,GACdG,QAAQC,KAAK;"}