@drivy/cobalt 0.17.0 → 0.18.0

package/cjs/tokens/icons.js

@@ -194,6 +194,7 @@ const icons = {
 	pencil: "pencil.svg",
 	peopleUser: "people-user.svg",
 	performance: "performance.svg",
+	phoneLink: "phone-link.svg",
 	phone: "phone.svg",
 	photos: "photos.svg",
 	pig: "pig.svg",

package/cjs/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/cjs/tokens/theme.js

@@ -39,7 +39,7 @@ const background = {
 	successAlt: "graphite/green.100/green.1000"
 };
 const buttonBackground = {
-	accentAlt: "indigo/purple.100/purpleDeep.900",
+	selected: "indigo/purple.100/purpleDeep.900",
 	destructiveInteractive: {
 		DEFAULT: "red/red.100/red.900",
 		hover: "red/red.120/red.900",
@@ -69,7 +69,7 @@ const buttonBackground = {
 	}
 };
 const buttonIcon = {
-	accentAlt: "purple/purple.500/grey.100",
+	selected: "white/purple.500/grey.100",
 	destructiveInteractive: {
 		DEFAULT: "red/red.500/red.200",
 		hover: "red/red.500/red.200",
@@ -99,7 +99,7 @@ const buttonIcon = {
 	}
 };
 const buttonLabel = {
-	accentAlt: "purple/purple.500/grey.100",
+	selected: "white/purple.500/grey.100",
 	destructiveInteractive: {
 		DEFAULT: "white/red.500/red.200",
 		hover: "white/red.500/red.200",

package/components/Buttons/DefaultButton/index.js

@@ -3,13 +3,13 @@ import cx from 'classnames';
 import { getButtonContent, getButtonCommonClassNames } from '../helpers.js';
 import Button from '../ButtonComponent.js';
 
-const getComputedClassName = ({ className, active, primary, destructive, }) => cx(className, "cob-Button__default", {
-    "cob-Button__default--active": active,
+const getComputedClassName = ({ className, selected, primary, destructive, }) => cx(className, "cob-Button__default", {
+    "cob-Button__default--selected": selected,
     "cob-Button__default--primary": primary,
     "cob-Button__default--destructive": destructive,
 });
 const _DefaultButton = forwardRef((props, ref) => {
-    const { children, active, primary, destructive, icon, iconPosition, className, loading, disabled, rounded, size, fullWidth, ...restButtonProps } = props;
+    const { children, selected, primary, destructive, icon, iconPosition, className, loading, disabled, rounded, size, fullWidth, ...restButtonProps } = props;
     const content = getButtonContent({ children, icon, iconPosition });
     const isDisabled = disabled || loading;
     const buttonClassNames = getButtonCommonClassNames({
@@ -21,14 +21,14 @@ const _DefaultButton = forwardRef((props, ref) => {
     });
     return (React.createElement(Button, { ...restButtonProps, className: getComputedClassName({
             className: buttonClassNames,
-            active,
+            selected,
             primary,
             destructive,
         }), ref: ref, loading: loading, disabled: isDisabled }, content));
 });
 _DefaultButton.displayName = "DefaultButton";
 const DefaultLink = forwardRef((props, ref) => {
-    const { children, active, primary, destructive, icon, iconPosition, className, loading, disabled, rounded, size, fullWidth, ...restLinkProps } = props;
+    const { children, selected, primary, destructive, icon, iconPosition, className, loading, disabled, rounded, size, fullWidth, ...restLinkProps } = props;
     const content = getButtonContent({ children, icon, iconPosition });
     const isDisabled = disabled || loading;
     const buttonClassNames = getButtonCommonClassNames({
@@ -40,7 +40,7 @@ const DefaultLink = forwardRef((props, ref) => {
     });
     return (React.createElement(Button.Link, { ...restLinkProps, className: getComputedClassName({
             className: buttonClassNames,
-            active,
+            selected,
             primary,
             destructive,
         }), ref: ref, loading: loading, disabled: isDisabled }, content));

package/components/Buttons/DefaultButton/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/DefaultButton/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\n\nimport {\n  ButtonTemplatePropsType,\n  getButtonCommonClassNames,\n  getButtonContent,\n} from \"../helpers\"\nimport Button, { ButtonProps, LinkProps } from \"../ButtonComponent\"\n\ntype DefaultCommonPropsType = ButtonTemplatePropsType<{\n  primary?: boolean\n  destructive?: boolean\n  active?: boolean\n}>\n\nexport type DefaultButtonPropsType = DefaultCommonPropsType & ButtonProps\nexport type DefaultLinkPropsType = DefaultCommonPropsType & LinkProps\n\nconst getComputedClassName = ({\n  className,\n  active,\n  primary,\n  destructive,\n}: DefaultCommonPropsType) =>\n  cx(className, \"cob-Button__default\", {\n    \"cob-Button__default--active\": active,\n    \"cob-Button__default--primary\": primary,\n    \"cob-Button__default--destructive\": destructive,\n  })\n\nconst _DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonPropsType>(\n  (props: DefaultButtonPropsType, ref) => {\n    const {\n      children,\n      active,\n      primary,\n      destructive,\n      icon,\n      iconPosition,\n      className,\n      loading,\n      disabled,\n      rounded,\n      size,\n      fullWidth,\n      ...restButtonProps\n    } = props\n    const content = getButtonContent({ children, icon, iconPosition })\n    const isDisabled = disabled || loading\n    const buttonClassNames = getButtonCommonClassNames({\n      disabled: isDisabled,\n      rounded,\n      size,\n      fullWidth,\n      className,\n    })\n    return (\n      <Button\n        {...restButtonProps}\n        className={getComputedClassName({\n          className: buttonClassNames,\n          active,\n          primary,\n          destructive,\n        })}\n        ref={ref}\n        loading={loading}\n        disabled={isDisabled}\n      >\n        {content}\n      </Button>\n    )\n  }\n)\n_DefaultButton.displayName = \"DefaultButton\"\n\nconst DefaultLink = forwardRef<HTMLAnchorElement, DefaultLinkPropsType>(\n  (props: DefaultLinkPropsType, ref) => {\n    const {\n      children,\n      active,\n      primary,\n      destructive,\n      icon,\n      iconPosition,\n      className,\n      loading,\n      disabled,\n      rounded,\n      size,\n      fullWidth,\n      ...restLinkProps\n    } = props\n    const content = getButtonContent({ children, icon, iconPosition })\n    const isDisabled = disabled || loading\n    const buttonClassNames = getButtonCommonClassNames({\n      disabled: isDisabled,\n      rounded,\n      size,\n      fullWidth,\n      className,\n    })\n    return (\n      <Button.Link\n        {...restLinkProps}\n        className={getComputedClassName({\n          className: buttonClassNames,\n          active,\n          primary,\n          destructive,\n        })}\n        ref={ref}\n        loading={loading}\n        disabled={isDisabled}\n      >\n        {content}\n      </Button.Link>\n    )\n  }\n)\nDefaultLink.displayName = \"DefaultLink\"\n\nconst DefaultButton = Object.assign(_DefaultButton, { Link: DefaultLink })\n\nexport default DefaultButton\n"],"names":[],"mappings":";;;;;AAmBA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,MAAM,EACN,OAAO,EACP,WAAW,GACY,KACvB,EAAE,CAAC,SAAS,EAAE,qBAAqB,EAAE;AACnC,IAAA,6BAA6B,EAAE,MAAM;AACrC,IAAA,8BAA8B,EAAE,OAAO;AACvC,IAAA,kCAAkC,EAAE,WAAW;AAChD,CAAA,CAAC,CAAA;AAEJ,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,KAA6B,EAAE,GAAG,KAAI;AACrC,IAAA,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,eAAe,EACnB,GAAG,KAAK,CAAA;AACT,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAClE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAA;IACtC,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AACjD,QAAA,QAAQ,EAAE,UAAU;QACpB,OAAO;QACP,IAAI;QACJ,SAAS;QACT,SAAS;AACV,KAAA,CAAC,CAAA;IACF,QACE,oBAAC,MAAM,EAAA,EAAA,GACD,eAAe,EACnB,SAAS,EAAE,oBAAoB,CAAC;AAC9B,YAAA,SAAS,EAAE,gBAAgB;YAC3B,MAAM;YACN,OAAO;YACP,WAAW;AACZ,SAAA,CAAC,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EAAA,EAEnB,OAAO,CACD,EACV;AACH,CAAC,CACF,CAAA;AACD,cAAc,CAAC,WAAW,GAAG,eAAe,CAAA;AAE5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,KAA2B,EAAE,GAAG,KAAI;AACnC,IAAA,MAAM,EACJ,QAAQ,EACR,MAAM,EACN,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,aAAa,EACjB,GAAG,KAAK,CAAA;AACT,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAClE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAA;IACtC,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AACjD,QAAA,QAAQ,EAAE,UAAU;QACpB,OAAO;QACP,IAAI;QACJ,SAAS;QACT,SAAS;AACV,KAAA,CAAC,CAAA;IACF,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,IAAI,EACN,EAAA,GAAA,aAAa,EACjB,SAAS,EAAE,oBAAoB,CAAC;AAC9B,YAAA,SAAS,EAAE,gBAAgB;YAC3B,MAAM;YACN,OAAO;YACP,WAAW;AACZ,SAAA,CAAC,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EAAA,EAEnB,OAAO,CACI,EACf;AACH,CAAC,CACF,CAAA;AACD,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;;;;"}
+{"version":3,"file":"index.js","sources":["../../../../src/components/Buttons/DefaultButton/index.tsx"],"sourcesContent":["import React, { forwardRef } from \"react\"\nimport cx from \"classnames\"\n\nimport {\n  ButtonTemplatePropsType,\n  getButtonCommonClassNames,\n  getButtonContent,\n} from \"../helpers\"\nimport Button, { ButtonProps, LinkProps } from \"../ButtonComponent\"\n\ntype DefaultCommonPropsType = ButtonTemplatePropsType<{\n  primary?: boolean\n  destructive?: boolean\n  selected?: boolean\n}>\n\nexport type DefaultButtonPropsType = DefaultCommonPropsType & ButtonProps\nexport type DefaultLinkPropsType = DefaultCommonPropsType & LinkProps\n\nconst getComputedClassName = ({\n  className,\n  selected,\n  primary,\n  destructive,\n}: DefaultCommonPropsType) =>\n  cx(className, \"cob-Button__default\", {\n    \"cob-Button__default--selected\": selected,\n    \"cob-Button__default--primary\": primary,\n    \"cob-Button__default--destructive\": destructive,\n  })\n\nconst _DefaultButton = forwardRef<HTMLButtonElement, DefaultButtonPropsType>(\n  (props: DefaultButtonPropsType, ref) => {\n    const {\n      children,\n      selected,\n      primary,\n      destructive,\n      icon,\n      iconPosition,\n      className,\n      loading,\n      disabled,\n      rounded,\n      size,\n      fullWidth,\n      ...restButtonProps\n    } = props\n    const content = getButtonContent({ children, icon, iconPosition })\n    const isDisabled = disabled || loading\n    const buttonClassNames = getButtonCommonClassNames({\n      disabled: isDisabled,\n      rounded,\n      size,\n      fullWidth,\n      className,\n    })\n    return (\n      <Button\n        {...restButtonProps}\n        className={getComputedClassName({\n          className: buttonClassNames,\n          selected,\n          primary,\n          destructive,\n        })}\n        ref={ref}\n        loading={loading}\n        disabled={isDisabled}\n      >\n        {content}\n      </Button>\n    )\n  }\n)\n_DefaultButton.displayName = \"DefaultButton\"\n\nconst DefaultLink = forwardRef<HTMLAnchorElement, DefaultLinkPropsType>(\n  (props: DefaultLinkPropsType, ref) => {\n    const {\n      children,\n      selected,\n      primary,\n      destructive,\n      icon,\n      iconPosition,\n      className,\n      loading,\n      disabled,\n      rounded,\n      size,\n      fullWidth,\n      ...restLinkProps\n    } = props\n    const content = getButtonContent({ children, icon, iconPosition })\n    const isDisabled = disabled || loading\n    const buttonClassNames = getButtonCommonClassNames({\n      disabled: isDisabled,\n      rounded,\n      size,\n      fullWidth,\n      className,\n    })\n    return (\n      <Button.Link\n        {...restLinkProps}\n        className={getComputedClassName({\n          className: buttonClassNames,\n          selected,\n          primary,\n          destructive,\n        })}\n        ref={ref}\n        loading={loading}\n        disabled={isDisabled}\n      >\n        {content}\n      </Button.Link>\n    )\n  }\n)\nDefaultLink.displayName = \"DefaultLink\"\n\nconst DefaultButton = Object.assign(_DefaultButton, { Link: DefaultLink })\n\nexport default DefaultButton\n"],"names":[],"mappings":";;;;;AAmBA,MAAM,oBAAoB,GAAG,CAAC,EAC5B,SAAS,EACT,QAAQ,EACR,OAAO,EACP,WAAW,GACY,KACvB,EAAE,CAAC,SAAS,EAAE,qBAAqB,EAAE;AACnC,IAAA,+BAA+B,EAAE,QAAQ;AACzC,IAAA,8BAA8B,EAAE,OAAO;AACvC,IAAA,kCAAkC,EAAE,WAAW;AAChD,CAAA,CAAC,CAAA;AAEJ,MAAM,cAAc,GAAG,UAAU,CAC/B,CAAC,KAA6B,EAAE,GAAG,KAAI;AACrC,IAAA,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,eAAe,EACnB,GAAG,KAAK,CAAA;AACT,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAClE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAA;IACtC,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AACjD,QAAA,QAAQ,EAAE,UAAU;QACpB,OAAO;QACP,IAAI;QACJ,SAAS;QACT,SAAS;AACV,KAAA,CAAC,CAAA;IACF,QACE,oBAAC,MAAM,EAAA,EAAA,GACD,eAAe,EACnB,SAAS,EAAE,oBAAoB,CAAC;AAC9B,YAAA,SAAS,EAAE,gBAAgB;YAC3B,QAAQ;YACR,OAAO;YACP,WAAW;AACZ,SAAA,CAAC,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EAAA,EAEnB,OAAO,CACD,EACV;AACH,CAAC,CACF,CAAA;AACD,cAAc,CAAC,WAAW,GAAG,eAAe,CAAA;AAE5C,MAAM,WAAW,GAAG,UAAU,CAC5B,CAAC,KAA2B,EAAE,GAAG,KAAI;AACnC,IAAA,MAAM,EACJ,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,WAAW,EACX,IAAI,EACJ,YAAY,EACZ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,OAAO,EACP,IAAI,EACJ,SAAS,EACT,GAAG,aAAa,EACjB,GAAG,KAAK,CAAA;AACT,IAAA,MAAM,OAAO,GAAG,gBAAgB,CAAC,EAAE,QAAQ,EAAE,IAAI,EAAE,YAAY,EAAE,CAAC,CAAA;AAClE,IAAA,MAAM,UAAU,GAAG,QAAQ,IAAI,OAAO,CAAA;IACtC,MAAM,gBAAgB,GAAG,yBAAyB,CAAC;AACjD,QAAA,QAAQ,EAAE,UAAU;QACpB,OAAO;QACP,IAAI;QACJ,SAAS;QACT,SAAS;AACV,KAAA,CAAC,CAAA;IACF,QACE,KAAC,CAAA,aAAA,CAAA,MAAM,CAAC,IAAI,EACN,EAAA,GAAA,aAAa,EACjB,SAAS,EAAE,oBAAoB,CAAC;AAC9B,YAAA,SAAS,EAAE,gBAAgB;YAC3B,QAAQ;YACR,OAAO;YACP,WAAW;AACZ,SAAA,CAAC,EACF,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,QAAQ,EAAE,UAAU,EAAA,EAEnB,OAAO,CACI,EACf;AACH,CAAC,CACF,CAAA;AACD,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,MAAM,aAAa,GAAG,MAAM,CAAC,MAAM,CAAC,cAAc,EAAE,EAAE,IAAI,EAAE,WAAW,EAAE;;;;"}

package/components/Card/index.js

@@ -4,8 +4,8 @@ import cx from 'classnames';
 const Card = ({ children, className, flattened }) => (React.createElement("div", { className: cx("cobalt-Card", className, {
         "cobalt-Card--flattened": flattened,
     }) }, children));
-const getClasses = ({ tabBar, tight, subdued, divided }) => {
-    return cx("cobalt-Card__Section", {
+const getClasses = ({ className = "", tabBar, tight, subdued, divided, }) => {
+    return cx(className, "cobalt-Card__Section", {
         "cobalt-Card__Section--tabBar": tabBar === true,
         "cobalt-Card__Section--tight": tight === true,
         "cobalt-Card__Section--subdued": subdued === true,
@@ -22,7 +22,8 @@ class CardSection extends PureComponent {
         return React.createElement("div", { className: getClasses(this.props) }, this.props.children);
     }
 }
-CardSection.Link = CardSectionLink;
+CardSection.Link = CardSectionLink;
+Card.Section = CardSection;
 
 export { Card, CardSection, Card as default };
 //# sourceMappingURL=index.js.map

package/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent, PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = PropsWithChildren<{\n  className?: string\n  flattened?: boolean\n}>\n\nexport const Card = ({ children, className, flattened }: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--flattened\": flattened,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({ tabBar, tight, subdued, divided }: CardSectionProps) => {\n  return cx(\"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nexport default Card\n"],"names":[],"mappings":";;;AAQa,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAa,MAChE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AAoBD,MAAM,UAAU,GAAG,CAAC,EAAE,MAAM,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAoB,KAAI;IAC3E,OAAO,EAAE,CAAC,sBAAsB,EAAE;QAChC,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,EAAA,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAE1C,MAAO,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React, { PureComponent, PropsWithChildren } from \"react\"\nimport cx from \"classnames\"\n\nexport type CardProps = PropsWithChildren<{\n  className?: string\n  flattened?: boolean\n}>\n\nexport const Card = ({ children, className, flattened }: CardProps) => (\n  <div\n    className={cx(\"cobalt-Card\", className, {\n      \"cobalt-Card--flattened\": flattened,\n    })}\n  >\n    {children}\n  </div>\n)\n\nexport type CardSectionProps = {\n  children: React.ReactNode\n  className?: string\n  tabBar?: boolean\n  tight?: boolean\n  subdued?: boolean\n  /**\n   * true or \"soft\"\n   * @default false\n   */\n  divided?: boolean | string\n}\n\nexport type CardSectionLinkProps = CardSectionProps & {\n  href: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"href\"]\n  target?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"target\"]\n  rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>[\"rel\"]\n}\n\nconst getClasses = ({\n  className = \"\",\n  tabBar,\n  tight,\n  subdued,\n  divided,\n}: CardSectionProps) => {\n  return cx(className, \"cobalt-Card__Section\", {\n    \"cobalt-Card__Section--tabBar\": tabBar === true,\n    \"cobalt-Card__Section--tight\": tight === true,\n    \"cobalt-Card__Section--subdued\": subdued === true,\n    \"cobalt-Card__Section--divided\": divided === true,\n    \"cobalt-Card__Section--dividedSoft\": divided === \"soft\",\n  })\n}\n\nconst CardSectionLink = ({\n  href,\n  target,\n  rel,\n  ...baseProps\n}: CardSectionLinkProps) => {\n  return (\n    <a\n      className={getClasses(baseProps)}\n      href={href}\n      target={target}\n      rel={target && !rel ? \"noopener noreferrer\" : rel}\n    >\n      {baseProps.children}\n    </a>\n  )\n}\nCardSectionLink.displayName = \"CardSection.Link\"\n\nexport class CardSection extends PureComponent<CardSectionProps, never> {\n  static Link = CardSectionLink\n  render() {\n    return <div className={getClasses(this.props)}>{this.props.children}</div>\n  }\n}\n\nCard.Section = CardSection\n\nexport default Card\n"],"names":[],"mappings":";;;AAQa,MAAA,IAAI,GAAG,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,SAAS,EAAa,MAChE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;AACtC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AAqBD,MAAM,UAAU,GAAG,CAAC,EAClB,SAAS,GAAG,EAAE,EACd,MAAM,EACN,KAAK,EACL,OAAO,EACP,OAAO,GACU,KAAI;AACrB,IAAA,OAAO,EAAE,CAAC,SAAS,EAAE,sBAAsB,EAAE;QAC3C,8BAA8B,EAAE,MAAM,KAAK,IAAI;QAC/C,6BAA6B,EAAE,KAAK,KAAK,IAAI;QAC7C,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,+BAA+B,EAAE,OAAO,KAAK,IAAI;QACjD,mCAAmC,EAAE,OAAO,KAAK,MAAM;AACxD,KAAA,CAAC,CAAA;AACJ,CAAC,CAAA;AAED,MAAM,eAAe,GAAG,CAAC,EACvB,IAAI,EACJ,MAAM,EACN,GAAG,EACH,GAAG,SAAS,EACS,KAAI;AACzB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,GAAA,EAAA,EAAA,SAAS,EAAE,UAAU,CAAC,SAAS,CAAC,EAChC,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,MAAM,EACd,GAAG,EAAE,MAAM,IAAI,CAAC,GAAG,GAAG,qBAAqB,GAAG,GAAG,EAEhD,EAAA,SAAS,CAAC,QAAQ,CACjB,EACL;AACH,CAAC,CAAA;AACD,eAAe,CAAC,WAAW,GAAG,kBAAkB,CAAA;AAE1C,MAAO,WAAY,SAAQ,aAAsC,CAAA;IAErE,MAAM,GAAA;AACJ,QAAA,OAAO,6BAAK,SAAS,EAAE,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,EAAA,EAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAO,CAAA;KAC3E;;AAHM,WAAI,CAAA,IAAA,GAAG,eAAe,CAAA;AAM/B,IAAI,CAAC,OAAO,GAAG,WAAW;;;;"}

package/components/Icon/__generated__/PhoneLinkIcon.js

@@ -0,0 +1,21 @@
+import React from 'react';
+import capitalize from '../../utils/capitalize.js';
+import 'lodash.throttle';
+import cx from 'classnames';
+
+const iconSource = "phoneLink";
+const PhoneLinkIcon = ({ color, size = 24, contained = false, className, }) => {
+    const computedClassName = cx(className, `cobalt-Icon cobalt-Icon--${iconSource}`, {
+        [`cobalt-Icon--color${capitalize(color)}`]: color,
+        "cobalt-Icon--size16": size === 16,
+        "cobalt-Icon--size20": size === 20,
+        "cobalt-Icon--size32": size === 32,
+        "cobalt-Icon--contained": contained,
+    });
+    const wrap = (content) => (React.createElement("span", { className: computedClassName }, content));
+    return wrap(React.createElement("svg", { viewBox: "0 0 24 24", xmlns: "http://www.w3.org/2000/svg" },
+        React.createElement("path", { d: "m20.123 7.7-1.002 1c1.803 1.8 1.803 4.6 0 6.5l1.002 1c2.503-2.3 2.503-6.1 0-8.5ZM18.02 9.8l-1.001 1c.5.7.5 1.6 0 2.3l1.001 1c1.201-1.2 1.201-3 0-4.3ZM14.015 1H4.003C2.9 1 2 1.9 2 3v18c0 1.1.901 2 2.003 2h10.012c1.101 0 2.002-.9 2.002-2V3c0-1.1-.9-2-2.002-2Zm0 19H4.003V4h10.012v16Z" })));
+};
+
+export { PhoneLinkIcon as default };
+//# sourceMappingURL=PhoneLinkIcon.js.map

package/components/Icon/__generated__/PhoneLinkIcon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PhoneLinkIcon.js","sources":["../../../../src/components/Icon/__generated__/PhoneLinkIcon.tsx"],"sourcesContent":["import React from \"react\"\nimport { IconColorsType } from \"../\"\nimport { capitalize } from \"../../utils\"\nimport cx from \"classnames\"\nexport type IconProps = {\n  color?: IconColorsType\n  size?: 16 | 20 | 24 | 32\n  contained?: boolean\n  className?: string\n}\nconst iconSource = \"phoneLink\"\n\nconst PhoneLinkIcon = ({\n  color,\n  size = 24,\n  contained = false,\n  className,\n}: IconProps) => {\n  const computedClassName = cx(\n    className,\n    `cobalt-Icon cobalt-Icon--${iconSource}`,\n    {\n      [`cobalt-Icon--color${capitalize(color)}`]: color,\n      \"cobalt-Icon--size16\": size === 16,\n      \"cobalt-Icon--size20\": size === 20,\n      \"cobalt-Icon--size32\": size === 32,\n      \"cobalt-Icon--contained\": contained,\n    }\n  )\n\n  const wrap = (content: React.ReactNode) => (\n    <span className={computedClassName}>{content}</span>\n  )\n\n  return wrap(\n    <svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n      <path d=\"m20.123 7.7-1.002 1c1.803 1.8 1.803 4.6 0 6.5l1.002 1c2.503-2.3 2.503-6.1 0-8.5ZM18.02 9.8l-1.001 1c.5.7.5 1.6 0 2.3l1.001 1c1.201-1.2 1.201-3 0-4.3ZM14.015 1H4.003C2.9 1 2 1.9 2 3v18c0 1.1.901 2 2.003 2h10.012c1.101 0 2.002-.9 2.002-2V3c0-1.1-.9-2-2.002-2Zm0 19H4.003V4h10.012v16Z\" />\n    </svg>\n  )\n}\n\nexport default PhoneLinkIcon\n"],"names":[],"mappings":";;;;;AAUA,MAAM,UAAU,GAAG,WAAW,CAAA;AAE9B,MAAM,aAAa,GAAG,CAAC,EACrB,KAAK,EACL,IAAI,GAAG,EAAE,EACT,SAAS,GAAG,KAAK,EACjB,SAAS,GACC,KAAI;IACd,MAAM,iBAAiB,GAAG,EAAE,CAC1B,SAAS,EACT,CAAA,yBAAA,EAA4B,UAAU,CAAA,CAAE,EACxC;QACE,CAAC,CAAA,kBAAA,EAAqB,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,GAAG,KAAK;QACjD,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AAClC,QAAA,wBAAwB,EAAE,SAAS;AACpC,KAAA,CACF,CAAA;AAED,IAAA,MAAM,IAAI,GAAG,CAAC,OAAwB,MACpC,KAAM,CAAA,aAAA,CAAA,MAAA,EAAA,EAAA,SAAS,EAAE,iBAAiB,EAAA,EAAG,OAAO,CAAQ,CACrD,CAAA;IAED,OAAO,IAAI,CACT,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,OAAO,EAAC,WAAW,EAAC,KAAK,EAAC,4BAA4B,EAAA;AACzD,QAAA,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EAAM,CAAC,EAAC,2RAA2R,EAAG,CAAA,CAClS,CACP,CAAA;AACH;;;;"}

package/components/Rating/RatingCompact.js

@@ -3,10 +3,13 @@ import cx from 'classnames';
 import { RatingIcon, defaultRatingIcon } from './RatingIcons.js';
 import RatingLabel from './RatingLabel.js';
 
-function RatingCompact({ className, value, icon = defaultRatingIcon, }) {
+function RatingCompact({ className, value, count, icon = defaultRatingIcon, }) {
     return (React.createElement("div", { className: cx("cobalt-rating", className) },
         React.createElement(RatingIcon, { icon: icon, size: 16, status: "full" }),
-        React.createElement(RatingLabel, null, value)));
+        React.createElement(RatingLabel, null,
+            value,
+            " ",
+            count && `(${count})`)));
 }
 
 export { RatingCompact };

package/components/Rating/RatingCompact.js.map

@@ -1 +1 @@
-{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={16} status={\"full\"} />\n      <RatingLabel>{value}</RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAgBM,SAAU,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,IAAI,GAAG,iBAAiB,GACD,EAAA;IACvB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACpD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAE,IAAA,EAAA,KAAK,CAAe,CAC9B,EACP;AACH;;;;"}
+{"version":3,"file":"RatingCompact.js","sources":["../../../src/components/Rating/RatingCompact.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport {\n  defaultRatingIcon,\n  RatingIcon,\n  RatingIconsPropsType,\n} from \"./RatingIcons\"\nimport RatingLabel from \"./RatingLabel\"\n\ntype RatingCompactPropsType = Pick<\n  RatingIconsPropsType,\n  \"className\" | \"value\" | \"size\"\n> & {\n  icon?: JSX.Element\n  count?: number\n}\n\nexport function RatingCompact({\n  className,\n  value,\n  count,\n  icon = defaultRatingIcon,\n}: RatingCompactPropsType) {\n  return (\n    <div className={cx(\"cobalt-rating\", className)}>\n      <RatingIcon icon={icon} size={16} status={\"full\"} />\n      <RatingLabel>\n        {value} {count && `(${count})`}\n      </RatingLabel>\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;;AAiBgB,SAAA,aAAa,CAAC,EAC5B,SAAS,EACT,KAAK,EACL,KAAK,EACL,IAAI,GAAG,iBAAiB,GACD,EAAA;IACvB,QACE,6BAAK,SAAS,EAAE,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,EAAA;AAC5C,QAAA,KAAA,CAAA,aAAA,CAAC,UAAU,EAAA,EAAC,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE,EAAE,MAAM,EAAE,MAAM,EAAI,CAAA;AACpD,QAAA,KAAA,CAAA,aAAA,CAAC,WAAW,EAAA,IAAA;YACT,KAAK;;AAAG,YAAA,KAAK,IAAI,CAAI,CAAA,EAAA,KAAK,GAAG,CAClB,CACV,EACP;AACH;;;;"}

package/icons/index.js

@@ -189,6 +189,7 @@ export { default as payments } from './payments.js';
 export { default as pencil } from './pencil.js';
 export { default as peopleUser } from './people-user.js';
 export { default as performance } from './performance.js';
+export { default as phoneLink } from './phone-link.js';
 export { default as phone } from './phone.js';
 export { default as photos } from './photos.js';
 export { default as pig } from './pig.js';

package/icons/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/icons/phone-link.js

@@ -0,0 +1,4 @@
+var phoneLink = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M20.123 7.7l-1.002 1c1.803 1.8 1.803 4.6 0 6.5l1.002 1c2.503-2.3 2.503-6.1 0-8.5zM18.02 9.8l-1.001 1c.5.7.5 1.6 0 2.3l1.001 1c1.201-1.2 1.201-3 0-4.3zM14.015 1H4.003C2.9 1 2 1.9 2 3v18c0 1.1.901 2 2.003 2h10.012c1.101 0 2.002-.9 2.002-2V3c0-1.1-.9-2-2.002-2zm0 19H4.003V4h10.012v16z\"/></svg>";
+
+export { phoneLink as default };
+//# sourceMappingURL=phone-link.js.map

package/icons/phone-link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"phone-link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;"}

package/icons/phone-link.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="m20.123 7.7-1.002 1c1.803 1.8 1.803 4.6 0 6.5l1.002 1c2.503-2.3 2.503-6.1 0-8.5ZM18.02 9.8l-1.001 1c.5.7.5 1.6 0 2.3l1.001 1c1.201-1.2 1.201-3 0-4.3ZM14.015 1H4.003C2.9 1 2 1.9 2 3v18c0 1.1.901 2 2.003 2h10.012c1.101 0 2.002-.9 2.002-2V3c0-1.1-.9-2-2.002-2Zm0 19H4.003V4h10.012v16Z"/></svg>

package/icons/search-car.js

@@ -1,4 +1,4 @@
-var searchCar = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" stroke-linejoin=\"round\" stroke-miterlimit=\"2\"><path d=\"M15.695 18.052a9.895 9.895 0 01-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 01-1.833 5.754l5.653 5.654a1 1 0 010 1.414l-.943.943a.999.999 0 01-1.414 0l-5.653-5.655zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 104.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 00.721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 00.721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 10-.187-2.127zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361zm-7.076 3.531a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785zm6.429 0a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785z\" fill=\"#362e53\" fill-rule=\"nonzero\"/></svg>";
+var searchCar = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\" fill-rule=\"evenodd\" clip-rule=\"evenodd\" stroke-linejoin=\"round\" stroke-miterlimit=\"2\"><path d=\"M15.695 18.052a9.895 9.895 0 01-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 01-1.833 5.754l5.653 5.654a1 1 0 010 1.414l-.943.943a.999.999 0 01-1.414 0l-5.653-5.655zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 104.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 00.721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 00.721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 10-.187-2.127zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361zm-7.076 3.531a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785zm6.429 0a.892.892 0 11-.001-1.785.892.892 0 01.001 1.785z\" fill-rule=\"nonzero\"/></svg>";
 
 export { searchCar as default };
 //# sourceMappingURL=search-car.js.map

package/icons/search-car.svg

@@ -1 +1 @@
-<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M15.695 18.052a9.895 9.895 0 0 1-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 0 1-1.833 5.754l5.653 5.654a1 1 0 0 1 0 1.414l-.943.943a.999.999 0 0 1-1.414 0l-5.653-5.655Zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 1 0 4.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 0 0 .721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 0 0 .721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 1 0-.187-2.127Zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361Zm-7.076 3.531a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Zm6.429 0a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Z" style="fill:#362e53;fill-rule:nonzero"/></svg>
+<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" xml:space="preserve" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2"><path d="M15.695 18.052a9.895 9.895 0 0 1-5.753 1.833C4.451 19.885 0 15.434 0 9.942 0 4.451 4.451 0 9.942 0c5.492 0 9.943 4.451 9.943 9.942a9.9 9.9 0 0 1-1.833 5.754l5.653 5.654a1 1 0 0 1 0 1.414l-.943.943a.999.999 0 0 1-1.414 0l-5.653-5.655Zm-.496-10.179C14.904 6.341 14.141 5 12.171 5H7.886c-1.97 0-2.733 1.341-3.028 2.873A1.072 1.072 0 1 0 4.671 10h.004c-.004.25-.004.49-.004.714v3.57c0 .403.323.716.721.716h1.416a.715.715 0 0 0 .721-.716v-.713h5v.713c0 .403.322.716.721.716h1.415a.715.715 0 0 0 .721-.716v-3.57c0-.224 0-.464-.004-.714h.004a1.072 1.072 0 1 0-.187-2.127Zm-1.309.917c.017.168.03.327.04.496H6.127c.01-.169.023-.328.04-.496.175-1.699.635-2.361 1.719-2.361h4.285c1.084 0 1.544.662 1.719 2.361Zm-7.076 3.531a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Zm6.429 0a.892.892 0 1 1-.001-1.785.892.892 0 0 1 .001 1.785Z" style="fill-rule:nonzero"/></svg>

package/index.js

@@ -234,6 +234,7 @@ export { default as PencilIcon } from './components/Icon/__generated__/PencilIco
 export { default as PeopleUserIcon } from './components/Icon/__generated__/PeopleUserIcon.js';
 export { default as PerformanceIcon } from './components/Icon/__generated__/PerformanceIcon.js';
 export { default as PhoneIcon } from './components/Icon/__generated__/PhoneIcon.js';
+export { default as PhoneLinkIcon } from './components/Icon/__generated__/PhoneLinkIcon.js';
 export { default as PhotosIcon } from './components/Icon/__generated__/PhotosIcon.js';
 export { default as PigIcon } from './components/Icon/__generated__/PigIcon.js';
 export { default as PinIcon } from './components/Icon/__generated__/PinIcon.js';

package/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@drivy/cobalt",
-  "version": "0.17.0",
+  "version": "0.18.0",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",
@@ -16,7 +16,7 @@
     "url": "https://github.com/TimPetricola"
   },
   "dependencies": {
-    "@juggle/resize-observer": "3.3.1",
+    "@juggle/resize-observer": "3.4.0",
     "@reach/accordion": "0.16.1",
     "@reach/alert": "0.16.0",
     "@reach/combobox": "0.16.3",
@@ -28,11 +28,11 @@
     "@react-spring/web": "9.3.0",
     "@tippyjs/react": "4.2.6",
     "classnames": "2.3.1",
-    "date-fns": "2.28.0",
+    "date-fns": "2.29.2",
     "lodash.throttle": "4.1.1",
     "media-typer": "1.1.0",
     "nanoid": "3.3.4",
-    "postcss": "8.4.14",
+    "postcss": "8.4.16",
     "tailwindcss": "2.2.19",
     "tippy.js": "6.3.7"
   },
@@ -41,60 +41,60 @@
     "react-dom": "^17.0.2"
   },
   "devDependencies": {
-    "@getaround-eu/babel-preset-app": "0.5.1",
-    "@getaround-eu/eslint-config": "1.7.1",
+    "@getaround-eu/babel-preset-app": "0.5.2",
+    "@getaround-eu/eslint-config": "1.7.2",
     "@getaround-eu/prettier-config": "1.2.0",
-    "@getaround-eu/stylelint-config": "1.2.1",
+    "@getaround-eu/stylelint-config": "1.2.2",
     "@getaround-eu/ts-config": "2.1.0",
     "@percy/storybook": "3.3.1",
     "@rollup/plugin-json": "4.1.0",
-    "@rushstack/eslint-patch": "1.1.3",
-    "@storybook/addon-essentials": "6.5.7",
-    "@storybook/addons": "6.5.7",
-    "@storybook/builder-webpack5": "6.5.7",
-    "@storybook/manager-webpack5": "6.5.7",
-    "@storybook/react": "6.5.7",
-    "@svgr/cli": "6.2.1",
-    "@testing-library/jest-dom": "5.16.4",
+    "@rushstack/eslint-patch": "1.1.4",
+    "@storybook/addon-essentials": "6.5.10",
+    "@storybook/addons": "6.5.10",
+    "@storybook/builder-webpack5": "6.5.10",
+    "@storybook/manager-webpack5": "6.5.10",
+    "@storybook/react": "6.5.10",
+    "@svgr/cli": "6.3.1",
+    "@testing-library/jest-dom": "5.16.5",
     "@testing-library/react": "12.1.5",
-    "@testing-library/react-hooks": "8.0.0",
+    "@testing-library/react-hooks": "8.0.1",
     "@types/classnames": "2.3.0",
     "@types/jest": "27.5.2",
     "@types/lodash.throttle": "4.1.7",
     "@types/media-typer": "1.1.1",
-    "@types/react": "17.0.45",
+    "@types/react": "17.0.48",
     "@whitespace/storybook-addon-html": "^5.0.0",
-    "autoprefixer": "10.4.7",
-    "core-js": "3.22.8",
+    "autoprefixer": "10.4.8",
+    "core-js": "3.24.1",
     "css-loader": "6.7.1",
-    "eslint": "8.17.0",
+    "eslint": "8.22.0",
     "jest": "27.5.1",
     "nested-object-access": "^0.2.5",
-    "np": "7.6.1",
+    "np": "7.6.2",
     "postcss-flexbugs-fixes": "5.0.2",
     "postcss-loader": "6.2.1",
-    "prettier": "2.6.2",
+    "prettier": "2.7.1",
     "raw-loader": "4.0.2",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-test-renderer": "17.0.2",
     "regenerator-runtime": "0.13.9",
-    "rollup": "2.75.6",
+    "rollup": "2.78.1",
     "rollup-plugin-copy": "3.4.0",
     "rollup-plugin-postcss": "4.0.2",
     "rollup-plugin-svgo": "1.1.0",
-    "rollup-plugin-typescript2": "0.32.1",
-    "sass": "1.52.2",
+    "rollup-plugin-typescript2": "0.33.0",
+    "sass": "1.54.5",
     "sass-loader": "12.6.0",
     "sharp": "0.30.7",
     "sharp-cli": "2.1.1",
     "style-loader": "3.3.1",
-    "stylelint": "14.8.5",
+    "stylelint": "14.11.0",
     "svg2vectordrawable": "2.9.1",
     "svgo": "2.8.0",
     "ts-jest": "27.1.5",
-    "ts-node": "10.7.0",
-    "typescript": "4.7.3"
+    "ts-node": "10.9.1",
+    "typescript": "4.7.4"
   },
   "scripts": {
     "build": "./scripts/build.sh",
@@ -138,6 +138,6 @@
     "access": "public"
   },
   "resolutions": {
-    "@types/react": "17.0.45"
+    "@types/react": "17.0.48"
   }
 }

package/styles/components/Buttons/DefaultButton/index.scss

@@ -45,4 +45,13 @@
       @include semantic-color(error, stroke, border-color);
     }
   }
+
+  &--selected:hover,
+  &--selected:focus,
+  &--selected:active,
+  &--selected {
+    @include semantic-color(selected, buttonBackground, background-color);
+    @include semantic-color(selected, buttonLabel, color);
+    @include semantic-color(accentAlt, stroke, border-color);
+  }
 }

package/styles/core/_colors-map.scss

@@ -40,7 +40,7 @@ $theme-colors-map: (
     successAlt: var(--c-l-graphite)
   ),
   buttonBackground: (
-    accentAlt: var(--c-l-indigo),
+    selected: var(--c-l-indigo),
     destructiveInteractive: (
       DEFAULT: var(--c-l-red),
       hover: var(--c-l-red),
@@ -70,7 +70,7 @@ $theme-colors-map: (
     )
   ),
   buttonIcon: (
-    accentAlt: var(--c-l-purple),
+    selected: var(--c-l-white),
     destructiveInteractive: (
       DEFAULT: var(--c-l-red),
       hover: var(--c-l-red),
@@ -100,7 +100,7 @@ $theme-colors-map: (
     )
   ),
   buttonLabel: (
-    accentAlt: var(--c-l-purple),
+    selected: var(--c-l-white),
     destructiveInteractive: (
       DEFAULT: var(--c-l-white),
       hover: var(--c-l-white),

package/styles/core/theme.scss

@@ -27,7 +27,7 @@
   --c-background-secondaryInteractive--hover: var(--c-l-grey-lighter);
   --c-background-success: var(--c-l-green);
   --c-background-successAlt: var(--c-l-graphite);
-  --c-buttonBackground-accentAlt: var(--c-l-indigo);
+  --c-buttonBackground-selected: var(--c-l-indigo);
   --c-buttonBackground-destructiveInteractive: var(--c-l-red);
   --c-buttonBackground-destructiveInteractive--hover: var(--c-l-red);
   --c-buttonBackground-destructiveInteractive--press: var(--c-l-red);
@@ -45,7 +45,7 @@
   --c-buttonBackground-tertiaryInteractive: var(--c-l-white);
   --c-buttonBackground-tertiaryInteractive--hover: var(--c-l-white);
   --c-buttonBackground-tertiaryInteractive--press: var(--c-l-white);
-  --c-buttonIcon-accentAlt: var(--c-l-purple);
+  --c-buttonIcon-selected: var(--c-l-white);
   --c-buttonIcon-destructiveInteractive: var(--c-l-red);
   --c-buttonIcon-destructiveInteractive--hover: var(--c-l-red);
   --c-buttonIcon-destructiveInteractive--press: var(--c-l-red);
@@ -63,7 +63,7 @@
   --c-buttonIcon-tertiaryInteractive: var(--c-l-blue);
   --c-buttonIcon-tertiaryInteractive--hover: var(--c-l-blue);
   --c-buttonIcon-tertiaryInteractive--press: var(--c-l-blue);
-  --c-buttonLabel-accentAlt: var(--c-l-purple);
+  --c-buttonLabel-selected: var(--c-l-white);
   --c-buttonLabel-destructiveInteractive: var(--c-l-white);
   --c-buttonLabel-destructiveInteractive--hover: var(--c-l-white);
   --c-buttonLabel-destructiveInteractive--press: var(--c-l-white);

package/tokens/icons.js

@@ -190,6 +190,7 @@ const icons = {
 	pencil: "pencil.svg",
 	peopleUser: "people-user.svg",
 	performance: "performance.svg",
+	phoneLink: "phone-link.svg",
 	phone: "phone.svg",
 	photos: "photos.svg",
 	pig: "pig.svg",

package/tokens/icons.js.map

@@ -1 +1 @@
-{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"icons.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/tokens/theme.js

@@ -35,7 +35,7 @@ const background = {
 	successAlt: "graphite/green.100/green.1000"
 };
 const buttonBackground = {
-	accentAlt: "indigo/purple.100/purpleDeep.900",
+	selected: "indigo/purple.100/purpleDeep.900",
 	destructiveInteractive: {
 		DEFAULT: "red/red.100/red.900",
 		hover: "red/red.120/red.900",
@@ -65,7 +65,7 @@ const buttonBackground = {
 	}
 };
 const buttonIcon = {
-	accentAlt: "purple/purple.500/grey.100",
+	selected: "white/purple.500/grey.100",
 	destructiveInteractive: {
 		DEFAULT: "red/red.500/red.200",
 		hover: "red/red.500/red.200",
@@ -95,7 +95,7 @@ const buttonIcon = {
 	}
 };
 const buttonLabel = {
-	accentAlt: "purple/purple.500/grey.100",
+	selected: "white/purple.500/grey.100",
 	destructiveInteractive: {
 		DEFAULT: "white/red.500/red.200",
 		hover: "white/red.500/red.200",