@activecollab/components 1.0.262 → 1.0.264

package/dist/cjs/components/CommandPallete/CommandPallete.styles.js

@@ -31,7 +31,7 @@ exports.StyledSearchIcon = StyledSearchIcon;
 var StyledInput = _styledComponents.default.input.withConfig({
   displayName: "CommandPalletestyles__StyledInput",
   componentId: "sc-16m145d-4"
-})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::placeholder{color:var(--color-theme-transparent-500);}"], _BreakPoints.screen.sm);
+})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{display:none;}::placeholder{color:var(--color-theme-transparent-500);}"], _BreakPoints.screen.sm);
 exports.StyledInput = StyledInput;
 var StyledParameter = _styledComponents.default.span.withConfig({
   displayName: "CommandPalletestyles__StyledParameter",

package/dist/cjs/components/CommandPallete/CommandPallete.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n\n  &:not(:first-child) {\n    border-top: 1px solid var(--color-theme-400);\n  }\n`;\n\nexport const StyledHeading = styled.p`\n  font-size: 12px;\n  margin-top: 12px;\n  margin-bottom: 4px;\n  font-weight: bold;\n  padding-left: 18px;\n  letter-spacing: 0.5px;\n  color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAwC;AAEjC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+GAC1CC,oBAAS,CAKZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2DAIpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,+NAMnCC,mBAAM,CAACC,EAAE,CAUZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8IAItCH,mBAAM,CAACC,EAAE,CAMZ;AAAC;AAEK,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMY,UAAU,GAAGb,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMa,wBAAwB,GAAGd,yBAAM,CAACe,EAAE;EAAA;EAAA;AAAA,iIAShD;AAAC;AAEK,IAAMC,aAAa,GAAGhB,yBAAM,CAACiB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AAAA;AACO,IAAMC,wBAAwB,GAAGlB,yBAAM,CAACmB,EAAE;EAAA;EAAA;AAAA,8XA2BhD;AAAC"}
+{"version":3,"file":"CommandPallete.styles.js","names":["StyledCommandPallete","styled","div","FontStyle","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","screen","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    display: none;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n\n  &:not(:first-child) {\n    border-top: 1px solid var(--color-theme-400);\n  }\n`;\n\nexport const StyledHeading = styled.p`\n  font-size: 12px;\n  margin-top: 12px;\n  margin-bottom: 4px;\n  font-weight: bold;\n  padding-left: 18px;\n  letter-spacing: 0.5px;\n  color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n"],"mappings":";;;;;;AAAA;AACA;AACA;AAAwC;AAEjC,IAAMA,oBAAoB,GAAGC,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,+GAC1CC,oBAAS,CAKZ;AAAC;AAEK,IAAMC,2BAA2B,GAAGH,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,2DAIpD;AAAC;AAEK,IAAMG,0BAA0B,GAAGJ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAAC;AAEK,IAAMI,gBAAgB,GAAGL,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAAC;AAEK,IAAMK,WAAW,GAAGN,yBAAM,CAACO,KAAK;EAAA;EAAA;AAAA,qSAMnCC,mBAAM,CAACC,EAAE,CAeZ;AAAC;AAEK,IAAMC,eAAe,GAAGV,yBAAM,CAACW,IAAI;EAAA;EAAA;AAAA,8IAItCH,mBAAM,CAACC,EAAE,CAMZ;AAAC;AAEK,IAAMG,mBAAmB,GAAGZ,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAAC;AAEK,IAAMY,UAAU,GAAGb,yBAAM,CAACC,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAAC;AAEK,IAAMa,wBAAwB,GAAGd,yBAAM,CAACe,EAAE;EAAA;EAAA;AAAA,iIAShD;AAAC;AAEK,IAAMC,aAAa,GAAGhB,yBAAM,CAACiB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AAAA;AACO,IAAMC,wBAAwB,GAAGlB,yBAAM,CAACmB,EAAE;EAAA;EAAA;AAAA,8XA2BhD;AAAC"}

package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js

@@ -40,11 +40,24 @@ var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
   }, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledSearchIcon, null, /*#__PURE__*/_react.default.createElement(_Icons.SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledParameter, null, "ID#:") : null, /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledInput, {
     ref: inputRef,
     autoFocus: true,
-    type: "text",
+    type: mode === "id" ? "number" : "text",
     autoCapitalize: "none",
     autoComplete: "none",
     value: search,
-    onChange: handleChange,
+    onChange: function onChange(e) {
+      var inputText = e.target.value;
+      if (inputText.startsWith("#")) {
+        setMode("id");
+        clearInput();
+      }
+      handleChange(e);
+    },
+    onPaste: function onPaste(e) {
+      var pastedText = e.clipboardData.getData("text");
+      if (pastedText.startsWith("#")) {
+        setMode("id");
+      }
+    },
     placeholder: mode === "id" ? "22" : "Search or jump to"
   }), /*#__PURE__*/_react.default.createElement(_CommandPallete.StyledActionWrapper, null, loading ? /*#__PURE__*/_react.default.createElement(_Loaders.SpinnerLoader, {
     style: {

package/dist/cjs/components/CommandPallete/CommandPalleteHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","useRef","useModeContext","mode","setMode","focusInput","current","focus","clearInput","value","marginRight","length","e","key","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\nimport { useModeContext } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\n  };\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        type=\"text\"\n        autoCapitalize=\"none\"\n        autoComplete=\"none\"\n        value={search}\n        onChange={handleChange}\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n      />\n\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader style={{ marginRight: \"4px\" }} /> : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalleteHeader.js","names":["CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","useRef","useModeContext","mode","setMode","focusInput","current","focus","clearInput","value","e","inputText","target","startsWith","pastedText","clipboardData","getData","marginRight","length","key","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\nimport { useModeContext } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\n  };\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        autoCapitalize=\"none\"\n        autoComplete=\"none\"\n        value={search}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n          }\n        }}\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n      />\n\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader style={{ marginRight: \"4px\" }} /> : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}

package/dist/cjs/components/Links/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n  /** Children type of node or string */\n  children: ReactNode | string;\n  /** Variant Buttons */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\"\n    | \"text link-primary\"\n    | \"text link-default\";\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n  /** Disabled prop */\n  disabled?: boolean;\n  /** CSS classes */\n  className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n  props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = \"a\">(\n    {\n      as,\n      children,\n      variant = \"contained\",\n      size,\n      disabled = false,\n      className,\n      ...args\n    }: LinkProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n\n    return (\n      <StyledLink\n        ref={ref}\n        as={Component}\n        disabled={disabled}\n        className={classNames(\"c-link\", className, {\n          \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-link--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-link--dark_transparent\": variant === \"dark transparent\",\n          \"c-link--circle_raised\": variant === \"circle raised\",\n          \"c-link--big\": size === \"big\",\n          \"c-link--small\": size === \"small\",\n          \"c-link--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n          \"c-link--disabled\": disabled,\n        })}\n        variant={variant}\n        size={size}\n        $iconOnly={children instanceof Object && !(children instanceof Array)}\n        {...args}\n        tabIndex={1}\n      >\n        {children instanceof Array ? (\n          <StyledLinkElements className=\"c-link__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledLinkElement\n                  className=\"c-link__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledLinkElement>\n              ) : null\n            )}\n          </StyledLinkElements>\n        ) : (\n          children\n        )}\n      </StyledLink>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAA6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC7E;AACA;AACA;AACO,IAAMA,IAA8C,gBAAG,IAAAC,iBAAU,EACtE,gBAUEC,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,6BAAC,kBAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAE,IAAAI,mBAAU,EAAC,QAAQ,EAAEH,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK,CAAC;MAC5D,kBAAkB,EAAEN;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK;EAAE,GAClEJ,IAAI;IACR,QAAQ,EAAE;EAAE,IAEXL,QAAQ,YAAYS,KAAK,gBACxB,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CT,QAAQ,CAACU,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,yBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBX,QACD,CACU;AAEjB,CAAC,CACF;AAAC;AAEFJ,IAAI,CAACiB,WAAW,GAAG,MAAM"}
+{"version":3,"file":"Link.js","names":["Link","forwardRef","ref","as","children","variant","size","disabled","className","args","Component","classNames","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n  /** Children type of node or string */\n  children: ReactNode | string;\n  /** Variant Buttons */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\"\n    | \"text link-primary\"\n    | \"text link-gray\";\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n  /** Disabled prop */\n  disabled?: boolean;\n  /** CSS classes */\n  className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n  props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = \"a\">(\n    {\n      as,\n      children,\n      variant = \"contained\",\n      size,\n      disabled = false,\n      className,\n      ...args\n    }: LinkProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n\n    return (\n      <StyledLink\n        ref={ref}\n        as={Component}\n        disabled={disabled}\n        className={classNames(\"c-link\", className, {\n          \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-link--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-link--dark_transparent\": variant === \"dark transparent\",\n          \"c-link--circle_raised\": variant === \"circle raised\",\n          \"c-link--big\": size === \"big\",\n          \"c-link--small\": size === \"small\",\n          \"c-link--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n          \"c-link--disabled\": disabled,\n        })}\n        variant={variant}\n        size={size}\n        $iconOnly={children instanceof Object && !(children instanceof Array)}\n        {...args}\n        tabIndex={1}\n      >\n        {children instanceof Array ? (\n          <StyledLinkElements className=\"c-link__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledLinkElement\n                  className=\"c-link__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledLinkElement>\n              ) : null\n            )}\n          </StyledLinkElements>\n        ) : (\n          children\n        )}\n      </StyledLink>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;;;;;AAAA;AACA;AACA;AAA6E;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAsC7E;AACA;AACA;AACO,IAAMA,IAA8C,gBAAG,IAAAC,iBAAU,EACtE,gBAUEC,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,6BAAC,kBAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAE,IAAAI,mBAAU,EAAC,QAAQ,EAAEH,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK,CAAC;MAC5D,kBAAkB,EAAEN;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYQ,MAAM,IAAI,EAAER,QAAQ,YAAYS,KAAK;EAAE,GAClEJ,IAAI;IACR,QAAQ,EAAE;EAAE,IAEXL,QAAQ,YAAYS,KAAK,gBACxB,6BAAC,0BAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CT,QAAQ,CAACU,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,6BAAC,yBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBX,QACD,CACU;AAEjB,CAAC,CACF;AAAC;AAEFJ,IAAI,CAACiB,WAAW,GAAG,MAAM"}

package/dist/cjs/components/Links/Styles.js

@@ -52,7 +52,7 @@ var StyledLink = _styledComponents.default.a.withConfig({
 }, function (props) {
   return props.variant === "text link-primary" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
 }, function (props) {
-  return props.variant === "text link-default" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-500);text-decoration:underline var(--color-theme-500);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
+  return props.variant === "text link-gray" && (0, _styledComponents.css)(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
 }, function (props) {
   return props.$iconOnly && (0, _styledComponents.css)(["padding:0;width:32px;", " ", ""], props.size === "small" && (0, _styledComponents.css)(["radius:16px;width:24px;"]), props.size === "big" && (0, _styledComponents.css)(["radius:20px;width:40px;"]));
 }, function (props) {

package/dist/cjs/components/Links/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-primary\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-primary);\n      text-decoration: underline var(--color-primary);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-default\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-theme-500);\n      text-decoration: underline var(--color-theme-500);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["StyledLinkElement","styled","div","StyledLink","a","FontStyle","BoxSizingStyle","props","disabled","css","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-primary\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-primary);\n      text-decoration: underline var(--color-primary);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-gray\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-theme-700);\n      text-decoration: underline var(--color-theme-700);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}

package/dist/esm/components/CommandPallete/CommandPallete.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,oEAMhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEAgBvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAU3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB,mEA2BpC,CAAC"}
+{"version":3,"file":"CommandPallete.styles.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,oBAAoB,oEAMhC,CAAC;AAEF,eAAO,MAAM,2BAA2B,oEAIvC,CAAC;AAEF,eAAO,MAAM,0BAA0B,oEAQtC,CAAC;AAEF,eAAO,MAAM,gBAAgB,oEAM5B,CAAC;AAEF,eAAO,MAAM,WAAW,sEAqBvB,CAAC;AAEF,eAAO,MAAM,eAAe,qEAU3B,CAAC;AAEF,eAAO,MAAM,mBAAmB,oEAI/B,CAAC;AAEF,eAAO,MAAM,UAAU,oEAMtB,CAAC;AAEF,eAAO,MAAM,wBAAwB,mEASpC,CAAC;AAEF,eAAO,MAAM,aAAa,kEAQzB,CAAC;AAGF,eAAO,MAAM,wBAAwB,mEA2BpC,CAAC"}

package/dist/esm/components/CommandPallete/CommandPallete.styles.js

@@ -20,7 +20,7 @@ export var StyledSearchIcon = styled.div.withConfig({
 export var StyledInput = styled.input.withConfig({
   displayName: "CommandPalletestyles__StyledInput",
   componentId: "sc-16m145d-4"
-})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::placeholder{color:var(--color-theme-transparent-500);}"], screen.sm);
+})(["all:unset;caret-color:var(--color-primary);color:var(--color-theme-900);width:100%;", "{font-size:32px;font-weight:300;letter-spacing:0.5px;line-height:44px;}::-webkit-outer-spin-button,::-webkit-inner-spin-button{display:none;}::placeholder{color:var(--color-theme-transparent-500);}"], screen.sm);
 export var StyledParameter = styled.span.withConfig({
   displayName: "CommandPalletestyles__StyledParameter",
   componentId: "sc-16m145d-5"

package/dist/esm/components/CommandPallete/CommandPallete.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPallete.styles.js","names":["styled","FontStyle","screen","StyledCommandPallete","div","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n\n  &:not(:first-child) {\n    border-top: 1px solid var(--color-theme-400);\n  }\n`;\n\nexport const StyledHeading = styled.p`\n  font-size: 12px;\n  margin-top: 12px;\n  margin-bottom: 4px;\n  font-weight: bold;\n  padding-left: 18px;\n  letter-spacing: 0.5px;\n  color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,IAAMC,oBAAoB,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,+GAC1CH,SAAS,CAKZ;AAED,OAAO,IAAMI,2BAA2B,GAAGL,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,2DAIpD;AAED,OAAO,IAAME,0BAA0B,GAAGN,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAED,OAAO,IAAMG,gBAAgB,GAAGP,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGR,MAAM,CAACS,KAAK;EAAA;EAAA;AAAA,+NAMnCP,MAAM,CAACQ,EAAE,CAUZ;AAED,OAAO,IAAMC,eAAe,GAAGX,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,8IAItCV,MAAM,CAACQ,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGb,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGd,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGf,MAAM,CAACgB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGjB,MAAM,CAACkB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGnB,MAAM,CAACoB,EAAE;EAAA;EAAA;AAAA,8XA2BhD"}
+{"version":3,"file":"CommandPallete.styles.js","names":["styled","FontStyle","screen","StyledCommandPallete","div","StyledCommandPalleteWrapper","StyledCommandPalleteHeader","StyledSearchIcon","StyledInput","input","sm","StyledParameter","span","StyledActionWrapper","StyledIcon","StyledCommandPalleteList","ul","StyledHeading","p","StyledCommandPalleteItem","li"],"sources":["../../../../src/components/CommandPallete/CommandPallete.styles.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { FontStyle } from \"../FontStyle\";\nimport { screen } from \"../BreakPoints\";\n\nexport const StyledCommandPallete = styled.div`\n  ${FontStyle}\n  background-color: var(--page-paper-main);\n  border-radius: 10px;\n  box-sizing: border-box;\n  max-width: 600px;\n`;\n\nexport const StyledCommandPalleteWrapper = styled.div`\n  overflow-x: hidden;\n  overflow-y: auto;\n  max-height: 450px;\n`;\n\nexport const StyledCommandPalleteHeader = styled.div`\n  align-items: center;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 16px;\n  padding-right: 16px;\n  padding-top: 12px;\n  border-bottom: 1px solid var(--color-theme-400);\n`;\n\nexport const StyledSearchIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledInput = styled.input`\n  all: unset;\n  caret-color: var(--color-primary);\n  color: var(--color-theme-900);\n  width: 100%;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n\n  ::-webkit-outer-spin-button,\n  ::-webkit-inner-spin-button {\n    display: none;\n  }\n\n  ::placeholder {\n    color: var(--color-theme-transparent-500);\n  }\n`;\n\nexport const StyledParameter = styled.span`\n  color: var(--color-theme-transparent-500);\n  margin-right: 8px;\n\n  ${screen.sm} {\n    font-size: 32px;\n    font-weight: 300;\n    letter-spacing: 0.5px;\n    line-height: 44px;\n  }\n`;\n\nexport const StyledActionWrapper = styled.div`\n  align-items: center;\n  display: flex;\n  gap: 8px;\n`;\n\nexport const StyledIcon = styled.div`\n  margin-right: 8px;\n\n  svg {\n    vertical-align: middle;\n  }\n`;\n\nexport const StyledCommandPalleteList = styled.ul`\n  list-style-type: none;\n  margin: 0;\n  padding: 0;\n  overflow: hidden;\n\n  &:not(:first-child) {\n    border-top: 1px solid var(--color-theme-400);\n  }\n`;\n\nexport const StyledHeading = styled.p`\n  font-size: 12px;\n  margin-top: 12px;\n  margin-bottom: 4px;\n  font-weight: bold;\n  padding-left: 18px;\n  letter-spacing: 0.5px;\n  color: var(--color-theme-600);\n`;\n\n// prettier-ignore\nexport const StyledCommandPalleteItem = styled.li`\n  align-items: center;\n  cursor: pointer;\n  display: flex;\n  padding-bottom: 12px;\n  padding-left: 18px;\n  padding-right: 18px;\n  padding-top: 12px;\n  position: relative;\n\n  &:last-child {\n    border-bottom-left-radius: 10px;\n    border-bottom-right-radius: 10px;\n  }\n\n  &:hover {\n    background-color: var(--color-theme-200);\n\n    &::before {\n      background-color: var(--color-primary);\n      content: \"\";\n      height: 100%;\n      left: 0;\n      position: absolute;\n      width: 2px;\n    }\n  }\n`;\n"],"mappings":"AAAA,OAAOA,MAAM,MAAM,mBAAmB;AACtC,SAASC,SAAS,QAAQ,cAAc;AACxC,SAASC,MAAM,QAAQ,gBAAgB;AAEvC,OAAO,IAAMC,oBAAoB,GAAGH,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,+GAC1CH,SAAS,CAKZ;AAED,OAAO,IAAMI,2BAA2B,GAAGL,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,2DAIpD;AAED,OAAO,IAAME,0BAA0B,GAAGN,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,iKAQnD;AAED,OAAO,IAAMG,gBAAgB,GAAGP,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,oDAMzC;AAED,OAAO,IAAMI,WAAW,GAAGR,MAAM,CAACS,KAAK;EAAA;EAAA;AAAA,qSAMnCP,MAAM,CAACQ,EAAE,CAeZ;AAED,OAAO,IAAMC,eAAe,GAAGX,MAAM,CAACY,IAAI;EAAA;EAAA;AAAA,8IAItCV,MAAM,CAACQ,EAAE,CAMZ;AAED,OAAO,IAAMG,mBAAmB,GAAGb,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,gDAI5C;AAED,OAAO,IAAMU,UAAU,GAAGd,MAAM,CAACI,GAAG;EAAA;EAAA;AAAA,oDAMnC;AAED,OAAO,IAAMW,wBAAwB,GAAGf,MAAM,CAACgB,EAAE;EAAA;EAAA;AAAA,iIAShD;AAED,OAAO,IAAMC,aAAa,GAAGjB,MAAM,CAACkB,CAAC;EAAA;EAAA;AAAA,8IAQpC;;AAED;AACA,OAAO,IAAMC,wBAAwB,GAAGnB,MAAM,CAACoB,EAAE;EAAA;EAAA;AAAA,8XA2BhD"}

package/dist/esm/components/CommandPallete/CommandPalleteHeader.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAU,MAAM,OAAO,CAAC;AAenD,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB;yDAK9B,yBAAyB;;CAwF3B,CAAC"}
+{"version":3,"file":"CommandPalleteHeader.d.ts","sourceRoot":"","sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,WAAW,EAAU,MAAM,OAAO,CAAC;AAenD,MAAM,WAAW,yBAAyB;IACxC,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,EAAE,CAAC,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;IACzD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,cAAc,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;CACzC;AAED,eAAO,MAAM,oBAAoB;yDAK9B,yBAAyB;;CAuG3B,CAAC"}

package/dist/esm/components/CommandPallete/CommandPalleteHeader.js

@@ -34,11 +34,24 @@ export var CommandPalleteHeader = function CommandPalleteHeader(_ref) {
   }, /*#__PURE__*/React.createElement(StyledSearchIcon, null, /*#__PURE__*/React.createElement(SearchLargeIcon, null)), mode === "id" ? /*#__PURE__*/React.createElement(StyledParameter, null, "ID#:") : null, /*#__PURE__*/React.createElement(StyledInput, {
     ref: inputRef,
     autoFocus: true,
-    type: "text",
+    type: mode === "id" ? "number" : "text",
     autoCapitalize: "none",
     autoComplete: "none",
     value: search,
-    onChange: handleChange,
+    onChange: function onChange(e) {
+      var inputText = e.target.value;
+      if (inputText.startsWith("#")) {
+        setMode("id");
+        clearInput();
+      }
+      handleChange(e);
+    },
+    onPaste: function onPaste(e) {
+      var pastedText = e.clipboardData.getData("text");
+      if (pastedText.startsWith("#")) {
+        setMode("id");
+      }
+    },
     placeholder: mode === "id" ? "22" : "Search or jump to"
   }), /*#__PURE__*/React.createElement(StyledActionWrapper, null, loading ? /*#__PURE__*/React.createElement(SpinnerLoader, {
     style: {

package/dist/esm/components/CommandPallete/CommandPalleteHeader.js.map

@@ -1 +1 @@
-{"version":3,"file":"CommandPalleteHeader.js","names":["React","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","SpinnerLoader","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","useModeContext","CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","mode","setMode","focusInput","current","focus","clearInput","value","marginRight","length","e","key","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\nimport { useModeContext } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\n  };\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        type=\"text\"\n        autoCapitalize=\"none\"\n        autoComplete=\"none\"\n        value={search}\n        onChange={handleChange}\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n      />\n\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader style={{ marginRight: \"4px\" }} /> : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}
+{"version":3,"file":"CommandPalleteHeader.js","names":["React","useRef","IconButton","CloseIcon","HashtagIcon","SearchLargeIcon","SpinnerLoader","Tooltip","StyledActionWrapper","StyledCommandPalleteHeader","StyledInput","StyledParameter","StyledSearchIcon","useModeContext","CommandPalleteHeader","search","handleChange","loading","onChangeSearch","inputRef","mode","setMode","focusInput","current","focus","clearInput","value","e","inputText","target","startsWith","pastedText","clipboardData","getData","marginRight","length","key","displayName"],"sources":["../../../../src/components/CommandPallete/CommandPalleteHeader.tsx"],"sourcesContent":["import React, { ChangeEvent, useRef } from \"react\";\nimport { IconButton } from \"../IconButton\";\nimport { CloseIcon, HashtagIcon, SearchLargeIcon } from \"../Icons\";\nimport { SpinnerLoader } from \"../Loaders\";\nimport { Tooltip } from \"../Tooltip\";\nimport {\n  StyledActionWrapper,\n  StyledCommandPalleteHeader,\n  StyledInput,\n  StyledParameter,\n  StyledSearchIcon,\n} from \"./CommandPallete.styles\";\nimport { useModeContext } from \"./context/ModeContext\";\n\n// eslint-disable-next-line @typescript-eslint/no-empty-interface\nexport interface CommandPalleteHeaderProps {\n  search: string;\n  handleChange: (e: ChangeEvent<HTMLInputElement>) => void;\n  loading?: boolean;\n  onChangeSearch: (value: string) => void;\n}\n\nexport const CommandPalleteHeader = ({\n  search,\n  handleChange,\n  loading = false,\n  onChangeSearch,\n}: CommandPalleteHeaderProps) => {\n  const inputRef = useRef<HTMLInputElement>(null);\n  const { mode, setMode } = useModeContext();\n\n  const focusInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.focus();\n    }\n  };\n\n  const clearInput = () => {\n    if (inputRef && inputRef.current) {\n      inputRef.current.value = \"\";\n      onChangeSearch(\"\");\n    }\n  };\n\n  return (\n    <StyledCommandPalleteHeader className=\"cp-header\">\n      <StyledSearchIcon>\n        <SearchLargeIcon />\n      </StyledSearchIcon>\n\n      {mode === \"id\" ? <StyledParameter>ID#:</StyledParameter> : null}\n\n      <StyledInput\n        ref={inputRef}\n        autoFocus\n        type={mode === \"id\" ? \"number\" : \"text\"}\n        autoCapitalize=\"none\"\n        autoComplete=\"none\"\n        value={search}\n        onChange={(e) => {\n          const inputText = e.target.value;\n\n          if (inputText.startsWith(\"#\")) {\n            setMode(\"id\");\n            clearInput();\n          }\n          handleChange(e);\n        }}\n        onPaste={(e) => {\n          const pastedText = e.clipboardData.getData(\"text\");\n\n          if (pastedText.startsWith(\"#\")) {\n            setMode(\"id\");\n          }\n        }}\n        placeholder={mode === \"id\" ? \"22\" : \"Search or jump to\"}\n      />\n\n      <StyledActionWrapper>\n        {loading ? <SpinnerLoader style={{ marginRight: \"4px\" }} /> : null}\n\n        {mode !== \"id\" && search.length === 0 ? (\n          <Tooltip title=\"Search by ID\" placement=\"top\">\n            <IconButton\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"id\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"id\");\n                clearInput();\n                focusInput();\n              }}\n              variant=\"text gray\"\n            >\n              <HashtagIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n\n        {search.length > 0 || mode === \"id\" ? (\n          <Tooltip\n            title={mode === \"id\" ? \"Close ID mode\" : \"Clear\"}\n            placement=\"top\"\n          >\n            <IconButton\n              variant=\"text gray\"\n              onKeyPress={(e) => {\n                if (e.key === \"Enter\") {\n                  setMode(\"default\");\n                  clearInput();\n                  focusInput();\n                }\n              }}\n              onClick={() => {\n                setMode(\"default\");\n                clearInput();\n                focusInput();\n              }}\n            >\n              <CloseIcon />\n            </IconButton>\n          </Tooltip>\n        ) : null}\n      </StyledActionWrapper>\n    </StyledCommandPalleteHeader>\n  );\n};\n\nCommandPalleteHeader.displayName = \"CommandPalleteItem\";\n"],"mappings":"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"}

package/dist/esm/components/Links/Link.d.ts

@@ -4,7 +4,7 @@ export interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {
     /** Children type of node or string */
     children: ReactNode | string;
     /** Variant Buttons */
-    variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised" | "text link-primary" | "text link-default";
+    variant?: "primary" | "secondary" | "tertiary" | "option" | "contained" | "outlined" | "text colored" | "text gray" | "dark transparent" | "circle raised" | "text link-primary" | "text link-gray";
     /** Button size can be big, medium or small */
     size?: "big" | "small";
     /** Disabled prop */

package/dist/esm/components/Links/Link.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,mBAAmB,CAAC;IACxB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC/C,gCAAgC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC5D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAChB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CA2DxD,CAAC"}
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../../src/components/Links/Link.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,kBAAkB,EAAE,SAAS,EAAc,MAAM,OAAO,CAAC;AAGzE,OAAO,EACL,gCAAgC,EAEjC,MAAM,mBAAmB,CAAC;AAE3B,MAAM,WAAW,UAAW,SAAQ,kBAAkB,CAAC,WAAW,CAAC;IACjE,sCAAsC;IACtC,QAAQ,EAAE,SAAS,GAAG,MAAM,CAAC;IAC7B,sBAAsB;IACtB,OAAO,CAAC,EACJ,SAAS,GACT,WAAW,GACX,UAAU,GACV,QAAQ,GACR,WAAW,GACX,UAAU,GACV,cAAc,GACd,WAAW,GACX,kBAAkB,GAClB,eAAe,GACf,mBAAmB,GACnB,gBAAgB,CAAC;IACrB,8CAA8C;IAC9C,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,CAAC;IACvB,oBAAoB;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kBAAkB;IAClB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,oBAAY,SAAS,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,IAC/C,gCAAgC,CAAC,CAAC,EAAE,UAAU,CAAC,CAAC;AAElD,oBAAY,aAAa,GAAG,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,GAAG,EAC5D,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC,KAChB,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC;AAE/B;;GAEG;AACH,eAAO,MAAM,IAAI,EAAE,aAAa,GAAG;IAAE,WAAW,CAAC,EAAE,MAAM,CAAA;CA2DxD,CAAC"}

package/dist/esm/components/Links/Link.js.map

@@ -1 +1 @@
-{"version":3,"file":"Link.js","names":["React","forwardRef","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","ref","as","children","variant","size","disabled","className","args","Component","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n  /** Children type of node or string */\n  children: ReactNode | string;\n  /** Variant Buttons */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\"\n    | \"text link-primary\"\n    | \"text link-default\";\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n  /** Disabled prop */\n  disabled?: boolean;\n  /** CSS classes */\n  className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n  props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = \"a\">(\n    {\n      as,\n      children,\n      variant = \"contained\",\n      size,\n      disabled = false,\n      className,\n      ...args\n    }: LinkProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n\n    return (\n      <StyledLink\n        ref={ref}\n        as={Component}\n        disabled={disabled}\n        className={classNames(\"c-link\", className, {\n          \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-link--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-link--dark_transparent\": variant === \"dark transparent\",\n          \"c-link--circle_raised\": variant === \"circle raised\",\n          \"c-link--big\": size === \"big\",\n          \"c-link--small\": size === \"small\",\n          \"c-link--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n          \"c-link--disabled\": disabled,\n        })}\n        variant={variant}\n        size={size}\n        $iconOnly={children instanceof Object && !(children instanceof Array)}\n        {...args}\n        tabIndex={1}\n      >\n        {children instanceof Array ? (\n          <StyledLinkElements className=\"c-link__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledLinkElement\n                  className=\"c-link__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledLinkElement>\n              ) : null\n            )}\n          </StyledLinkElements>\n        ) : (\n          children\n        )}\n      </StyledLink>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAmCC,UAAU,QAAQ,OAAO;AACxE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,UAAU;AAsC5E;AACA;AACA;AACA,OAAO,IAAMC,IAA8C,gBAAGL,UAAU,CACtE,gBAUEM,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,oBAAC,UAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAEV,UAAU,CAAC,QAAQ,EAAEW,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK,CAAC;MAC5D,kBAAkB,EAAEL;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK;EAAE,GAClEH,IAAI;IACR,QAAQ,EAAE;EAAE,IAEXL,QAAQ,YAAYQ,KAAK,gBACxB,oBAAC,kBAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CR,QAAQ,CAACS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,oBAAC,iBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBV,QACD,CACU;AAEjB,CAAC,CACF;AAEDH,IAAI,CAACe,WAAW,GAAG,MAAM"}
+{"version":3,"file":"Link.js","names":["React","forwardRef","classNames","StyledLink","StyledLinkElement","StyledLinkElements","Link","ref","as","children","variant","size","disabled","className","args","Component","Object","Array","map","value","index","displayName"],"sources":["../../../../src/components/Links/Link.tsx"],"sourcesContent":["import React, { BaseHTMLAttributes, ReactNode, forwardRef } from \"react\";\nimport classNames from \"classnames\";\nimport { StyledLink, StyledLinkElement, StyledLinkElements } from \"./Styles\";\nimport {\n  PolymorphicComponentPropsWithRef,\n  PolymorphicRef,\n} from \"../../utils/types\";\n\nexport interface ILinkProps extends BaseHTMLAttributes<HTMLElement> {\n  /** Children type of node or string */\n  children: ReactNode | string;\n  /** Variant Buttons */\n  variant?:\n    | \"primary\"\n    | \"secondary\"\n    | \"tertiary\"\n    | \"option\"\n    | \"contained\"\n    | \"outlined\"\n    | \"text colored\"\n    | \"text gray\"\n    | \"dark transparent\"\n    | \"circle raised\"\n    | \"text link-primary\"\n    | \"text link-gray\";\n  /** Button size can be big, medium or small */\n  size?: \"big\" | \"small\";\n  /** Disabled prop */\n  disabled?: boolean;\n  /** CSS classes */\n  className?: string;\n}\n\nexport type LinkProps<C extends React.ElementType> =\n  PolymorphicComponentPropsWithRef<C, ILinkProps>;\n\nexport type LinkComponent = <C extends React.ElementType = \"a\">(\n  props: LinkProps<C>\n) => React.ReactElement | null;\n\n/**\n * Link component\n */\nexport const Link: LinkComponent & { displayName?: string } = forwardRef(\n  <C extends React.ElementType = \"a\">(\n    {\n      as,\n      children,\n      variant = \"contained\",\n      size,\n      disabled = false,\n      className,\n      ...args\n    }: LinkProps<C>,\n    ref?: PolymorphicRef<C>\n  ) => {\n    const Component = as || \"a\";\n\n    return (\n      <StyledLink\n        ref={ref}\n        as={Component}\n        disabled={disabled}\n        className={classNames(\"c-link\", className, {\n          \"c-link--contained\": variant === \"primary\" || variant === \"contained\",\n          \"c-link--outlined\": variant === \"secondary\" || variant === \"outlined\",\n          \"c-link--text_colored\":\n            variant === \"tertiary\" || variant === \"text colored\",\n          \"c-link--text_gray\": variant === \"option\" || variant === \"text gray\",\n          \"c-link--dark_transparent\": variant === \"dark transparent\",\n          \"c-link--circle_raised\": variant === \"circle raised\",\n          \"c-link--big\": size === \"big\",\n          \"c-link--small\": size === \"small\",\n          \"c-link--icon-only\":\n            children instanceof Object && !(children instanceof Array),\n          \"c-link--disabled\": disabled,\n        })}\n        variant={variant}\n        size={size}\n        $iconOnly={children instanceof Object && !(children instanceof Array)}\n        {...args}\n        tabIndex={1}\n      >\n        {children instanceof Array ? (\n          <StyledLinkElements className=\"c-link__elements\">\n            {children.map((value, index) =>\n              value ? (\n                <StyledLinkElement\n                  className=\"c-link__elements__element\"\n                  key={index}\n                >\n                  {value}\n                </StyledLinkElement>\n              ) : null\n            )}\n          </StyledLinkElements>\n        ) : (\n          children\n        )}\n      </StyledLink>\n    );\n  }\n);\n\nLink.displayName = \"Link\";\n"],"mappings":";;;AAAA,OAAOA,KAAK,IAAmCC,UAAU,QAAQ,OAAO;AACxE,OAAOC,UAAU,MAAM,YAAY;AACnC,SAASC,UAAU,EAAEC,iBAAiB,EAAEC,kBAAkB,QAAQ,UAAU;AAsC5E;AACA;AACA;AACA,OAAO,IAAMC,IAA8C,gBAAGL,UAAU,CACtE,gBAUEM,GAAuB,EACpB;EAAA,IATDC,EAAE,QAAFA,EAAE;IACFC,QAAQ,QAARA,QAAQ;IAAA,oBACRC,OAAO;IAAPA,OAAO,6BAAG,WAAW;IACrBC,IAAI,QAAJA,IAAI;IAAA,qBACJC,QAAQ;IAARA,QAAQ,8BAAG,KAAK;IAChBC,SAAS,QAATA,SAAS;IACNC,IAAI;EAIT,IAAMC,SAAS,GAAGP,EAAE,IAAI,GAAG;EAE3B,oBACE,oBAAC,UAAU;IACT,GAAG,EAAED,GAAI;IACT,EAAE,EAAEQ,SAAU;IACd,QAAQ,EAAEH,QAAS;IACnB,SAAS,EAAEV,UAAU,CAAC,QAAQ,EAAEW,SAAS,EAAE;MACzC,mBAAmB,EAAEH,OAAO,KAAK,SAAS,IAAIA,OAAO,KAAK,WAAW;MACrE,kBAAkB,EAAEA,OAAO,KAAK,WAAW,IAAIA,OAAO,KAAK,UAAU;MACrE,sBAAsB,EACpBA,OAAO,KAAK,UAAU,IAAIA,OAAO,KAAK,cAAc;MACtD,mBAAmB,EAAEA,OAAO,KAAK,QAAQ,IAAIA,OAAO,KAAK,WAAW;MACpE,0BAA0B,EAAEA,OAAO,KAAK,kBAAkB;MAC1D,uBAAuB,EAAEA,OAAO,KAAK,eAAe;MACpD,aAAa,EAAEC,IAAI,KAAK,KAAK;MAC7B,eAAe,EAAEA,IAAI,KAAK,OAAO;MACjC,mBAAmB,EACjBF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK,CAAC;MAC5D,kBAAkB,EAAEL;IACtB,CAAC,CAAE;IACH,OAAO,EAAEF,OAAQ;IACjB,IAAI,EAAEC,IAAK;IACX,SAAS,EAAEF,QAAQ,YAAYO,MAAM,IAAI,EAAEP,QAAQ,YAAYQ,KAAK;EAAE,GAClEH,IAAI;IACR,QAAQ,EAAE;EAAE,IAEXL,QAAQ,YAAYQ,KAAK,gBACxB,oBAAC,kBAAkB;IAAC,SAAS,EAAC;EAAkB,GAC7CR,QAAQ,CAACS,GAAG,CAAC,UAACC,KAAK,EAAEC,KAAK;IAAA,OACzBD,KAAK,gBACH,oBAAC,iBAAiB;MAChB,SAAS,EAAC,2BAA2B;MACrC,GAAG,EAAEC;IAAM,GAEVD,KAAK,CACY,GAClB,IAAI;EAAA,EACT,CACkB,GAErBV,QACD,CACU;AAEjB,CAAC,CACF;AAEDH,IAAI,CAACe,WAAW,GAAG,MAAM"}

package/dist/esm/components/Links/Styles.js

@@ -42,7 +42,7 @@ export var StyledLink = styled.a.withConfig({
 }, function (props) {
   return props.variant === "text link-primary" && css(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
 }, function (props) {
-  return props.variant === "text link-default" && css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-500);text-decoration:underline var(--color-theme-500);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
+  return props.variant === "text link-gray" && css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
 }, function (props) {
   return props.$iconOnly && css(["padding:0;width:32px;", " ", ""], props.size === "small" && css(["radius:16px;width:24px;"]), props.size === "big" && css(["radius:20px;width:40px;"]));
 }, function (props) {

package/dist/esm/components/Links/Styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-primary\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-primary);\n      text-decoration: underline var(--color-primary);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-default\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-theme-500);\n      text-decoration: underline var(--color-theme-500);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}
+{"version":3,"file":"Styles.js","names":["styled","css","FontStyle","BoxSizingStyle","StyledLinkElement","div","StyledLink","a","props","disabled","size","variant","$iconOnly","StyledLinkElements","StyledBackLink","displayName"],"sources":["../../../../src/components/Links/Styles.ts"],"sourcesContent":["import styled, { css } from \"styled-components\";\nimport tw from \"twin.macro\";\nimport { FontStyle } from \"../FontStyle\";\nimport { BoxSizingStyle } from \"../BoxSizingStyle\";\nimport { ILinkProps } from \"./Link\";\n\ninterface StyledLinkProps extends ILinkProps {\n  $iconOnly: boolean;\n}\n\nexport const StyledLinkElement = styled.div``;\n\nexport const StyledLink = styled.a<StyledLinkProps>`\n  ${FontStyle}\n  ${BoxSizingStyle}\n  ${tw`\n    tw-antialiased\n    tw-font-medium\n    tw-leading-none\n    tw-m-0\n    tw-no-underline\n    tw-text-sm\n    tw-select-none\n    tw-cursor-pointer\n    tw-inline-flex\n    tw-items-center\n    tw-justify-center`}\n\n  border: none;\n  height: 32px;\n  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease,\n    border-color 0.3s ease;\n\n  svg {\n    fill: currentColor;\n  }\n\n  &::-moz-focus-inner {\n    border: 0;\n  }\n\n  &:focus {\n    outline: none;\n  }\n\n  &:hover {\n    text-decoration: none;\n  }\n\n  ${(props) =>\n    props.disabled &&\n    css`\n      cursor: default;\n      opacity: 50%;\n      pointer-events: none;\n    `}\n\n  ${(props) =>\n    props.size === \"small\" &&\n    css`\n      height: 24px;\n    `}\n\n  ${(props) =>\n    props.size === \"big\" &&\n    css`\n      height: 40px;\n    `}\n\n  ${(props) =>\n    (props.variant === \"primary\" || props.variant === \"contained\") &&\n    css`\n      padding: 0 16px;\n      background-color: var(--color-primary);\n      border-radius: 16px;\n      color: var(--color-theme-100);\n\n      &:focus,\n      &:hover {\n        box-shadow: 0 3px 6px -2px var(--color-primary-500);\n        background-color: var(--color-primary-800);\n      }\n\n      &:active {\n        box-shadow: 0 4px 10px -2px var(--color-primary-600);\n        background-color: var(--color-primary-800);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"secondary\" || props.variant === \"outlined\") &&\n    css`\n      padding: 0 16px;\n      background-color: transparent;\n      border-radius: 16px;\n      border: solid 1px var(--color-theme-600);\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n      }\n\n      &:active {\n        border-color: var(--color-primary);\n        color: var(--color-primary);\n        background-color: var(--color-primary-200);\n      }\n    `}\n\n  ${(props) =>\n    (props.variant === \"tertiary\" || props.variant === \"text colored\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-primary);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-primary-200);\n      }\n\n      &:active {\n        background-color: var(--color-primary-300);\n      }\n    `}\n\n   ${(props) =>\n    (props.variant === \"option\" || props.variant === \"text gray\") &&\n    css`\n      padding: 0 8px;\n      background-color: transparent;\n      border-radius: 6px;\n      color: var(--color-theme-600);\n\n      &:focus,\n      &:hover {\n        background-color: var(--color-theme-300);\n        color: var(--color-theme-900);\n      }\n\n      &:active {\n        background-color: var(--color-theme-400);\n        color: var(--color-theme-900);\n      }\n    `}\n\n   ${(props) =>\n    props.variant === \"dark transparent\" &&\n    css`\n      padding: 0 8px;\n      background-color: rgba(0, 0, 0, 0.5);\n      border-radius: var(--ac-br-6);\n      color: var(--only-white);\n\n      &:hover {\n        background-color: rgba(0, 0, 0, 0.85);\n      }\n\n      &:active {\n        background-color: var(--only-black);\n      }\n    `}\n\n  ${(props) =>\n    props.variant === \"circle raised\" &&\n    css`\n      padding: 0 6px;\n      background-color: transparent;\n      border-radius: var(--ac-br-rounded);\n      color: var(--color-theme-700);\n      transition: ease 0.3s all;\n\n      &:hover {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary);\n      }\n\n      &:active {\n        background-color: var(--page-paper-main);\n        box-shadow: var(--shadow-tertiary-hover);\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-primary\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-primary);\n      text-decoration: underline var(--color-primary);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n    ${(props) =>\n    props.variant === \"text link-gray\" &&\n    css`\n      line-height: 14px;\n      letter-spacing: 0.25px;\n      color: var(--color-theme-700);\n      text-decoration: underline var(--color-theme-700);\n      text-underline-offset: 3px;\n      height: fit-content;\n\n      &:hover {\n        text-decoration: none;\n      }\n\n      &:focus {\n        text-decoration: none;\n        outline: 1px solid var(--color-primary);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n    `}\n\n\n   ${(props) =>\n    props.$iconOnly &&\n    css`\n      padding: 0;\n      width: 32px;\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n        width: 24px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n        width: 40px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"primary\" ||\n      props.variant === \"contained\" ||\n      props.variant === \"secondary\" ||\n      props.variant === \"outlined\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -6px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -6px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 16px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 20px;\n      `}\n    `}\n\n   ${(props) =>\n    (props.variant === \"tertiary\" ||\n      props.variant === \"text colored\" ||\n      props.variant === \"option\" ||\n      props.variant === \"text gray\" ||\n      props.variant === \"dark transparent\") &&\n    css`\n      ${StyledLinkElement}:first-child svg {\n        margin-left: -4px;\n      }\n      ${StyledLinkElement}:last-child svg {\n        margin-right: -4px;\n      }\n\n      ${props.size === \"small\" &&\n      css`\n        radius: 4px;\n      `}\n\n      ${props.size === \"big\" &&\n      css`\n        radius: 8px;\n      `}\n    `}\n`;\n\nexport const StyledLinkElements = styled.div`\n  display: flex;\n  align-items: center;\n\n  ${StyledLinkElement} {\n    display: inline-flex;\n    svg {\n      margin: 0 4px;\n    }\n  }\n`;\n\nexport const StyledBackLink = styled.a`\n  ${FontStyle}\n  ${BoxSizingStyle}\n\n  ${tw`\n    tw-pl-8\n    tw-text-xxs\n    tw-uppercase\n    tw-inline-flex\n    tw-align-middle\n    tw-pr-4\n    tw-text-theme-600\n    tw-cursor-pointer\n  `}\n\n  text-decoration: none;\n  border: transparent 1px solid;\n  border-radius: 20px;\n  height: 32px;\n  font-size: 10px;\n  font-weight: 500;\n  display: table-cell;\n  vertical-align: middle;\n\n  &:before,\n  &:after {\n    content: \"\";\n    ${tw`\n      tw-border-solid\n      tw-text-theme-700\n      tw-inline-block\n      tw-p-0\n      tw-w-2\n      tw-h-2\n      tw-bg-no-repeat\n    `}\n    border-width: 0 1px 1px 0;\n    position: absolute;\n    left: 0;\n    transition: all ease 0.3s;\n  }\n  &:before {\n    ${tw`tw-opacity-100`}\n    transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:after {\n    ${tw`tw-opacity-0`}\n    transform: translateX(2rem) translateY(0.1rem) rotate(135deg);\n  }\n  &:hover {\n    text-decoration: none;\n    border-color: var(--border-primary);\n    &:before {\n      ${tw`tw-opacity-0`}\n      transform: translateX(0rem) translateY(0.1rem) rotate(135deg);\n    }\n    &:after {\n      ${tw`tw-opacity-100`}\n      transform: translateX(1rem) translateY(0.1rem) rotate(135deg);\n    }\n  }\n`;\n\nStyledBackLink.displayName = \"StyledBackLink\";\nStyledLinkElement.displayName = \"StyledLinkElement\";\nStyledLinkElements.displayName = \"StyledLinkElements\";\nStyledLink.displayName = \"StyledLink\";\n"],"mappings":"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"}

package/dist/index.js

@@ -12240,7 +12240,7 @@
   }, function (props) {
     return props.variant === "text link-primary" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-primary);text-decoration:underline var(--color-primary);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
   }, function (props) {
-    return props.variant === "text link-default" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-500);text-decoration:underline var(--color-theme-500);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
+    return props.variant === "text link-gray" && styled.css(["line-height:14px;letter-spacing:0.25px;color:var(--color-theme-700);text-decoration:underline var(--color-theme-700);text-underline-offset:3px;height:fit-content;&:hover{text-decoration:none;}&:focus{text-decoration:none;outline:1px solid var(--color-primary);outline-offset:2px;border-radius:2px;}"]);
   }, function (props) {
     return props.$iconOnly && styled.css(["padding:0;width:32px;", " ", ""], props.size === "small" && styled.css(["radius:16px;width:24px;"]), props.size === "big" && styled.css(["radius:20px;width:40px;"]));
   }, function (props) {