@drivy/cobalt 0.42.3 → 0.42.4

package/components/ContainedIcon/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\n\ntype Extends<T, U extends T> = U\n\ntype ContainedIconColorType = Extends<\n  IconColorsType,\n  \"base\" | \"accent\" | \"disabled\" | \"error\" | \"info\" | \"success\" | \"connect\"\n>\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: ContainedIconColorType\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={`cobalt-contained-icon cobalt-contained-icon--color${capitalize(\n        color\n      )}`}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;AAgBM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,GACS,EAAA;AACvB,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EACE,SAAS,EAAE,qDAAqD,UAAU,CACxE,KAAK,CACN,CAAE,CAAA,EAAA,EAEF,IAAI,CACD,EACP;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/ContainedIcon/index.tsx"],"sourcesContent":["import React from \"react\"\nimport capitalize from \"../utils/capitalize\"\nimport { IconColorsType } from \"../Icon\"\nimport cx from \"classnames\"\n\ntype Extends<T, U extends T> = U\n\ntype ContainedIconColorType = Extends<\n  IconColorsType,\n  \"base\" | \"accent\" | \"disabled\" | \"error\" | \"info\" | \"success\" | \"connect\"\n>\n\nexport type ContainedIconPropsType = {\n  icon: React.JSX.Element\n  color?: ContainedIconColorType\n  className?: string\n}\n\nexport function ContainedIcon({\n  icon,\n  color = \"base\",\n  className,\n}: ContainedIconPropsType) {\n  return (\n    <div\n      className={cx(\n        className,\n        `cobalt-contained-icon cobalt-contained-icon--color${capitalize(color)}`\n      )}\n    >\n      {icon}\n    </div>\n  )\n}\n"],"names":[],"mappings":";;;;AAkBM,SAAU,aAAa,CAAC,EAC5B,IAAI,EACJ,KAAK,GAAG,MAAM,EACd,SAAS,GACc,EAAA;AACvB,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CACX,SAAS,EACT,CAAA,kDAAA,EAAqD,UAAU,CAAC,KAAK,CAAC,CAAE,CAAA,CACzE,IAEA,IAAI,CACD,EACP;AACH;;;;"}

package/components/Flag/index.js

@@ -11,8 +11,8 @@ const BUNDLED_FLAGS = Object.freeze(Object.keys(countries.flags).reduce((bundled
     ...bundledFlags,
     [name]: index[name],
 }), {}));
-const Flag = ({ country, size = 24 }) => {
-    const className = cx("cobalt-Flag", {
+const Flag = ({ country, size = 24, className }) => {
+    const _className = cx("cobalt-Flag", className, {
         "cobalt-Flag--size16": size === 16,
         "cobalt-Flag--size20": size === 20,
         "cobalt-Flag--size32": size === 32,
@@ -20,7 +20,7 @@ const Flag = ({ country, size = 24 }) => {
     const countryFlag = BUNDLED_FLAGS[country];
     if (countryFlag == null)
         throw new Error(`'${country}' Flag can not be found. Did you add the source and export it`);
-    return (React.createElement("span", { className: className, dangerouslySetInnerHTML: { __html: countryFlag } }));
+    return (React.createElement("span", { className: _className, dangerouslySetInnerHTML: { __html: countryFlag } }));
 };
 
 export { BUNDLED_FLAGS, Flag };

package/components/Flag/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../../src/components/Flag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { countries } from \"../../tokens\"\n\nimport * as flags from \"../../icons/countries\"\nimport { eqSet } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(flags)),\n    new Set(Object.keys(countries.flags))\n  )\n)\n  throw new Error(\n    \"Flag sources and tokens are not consistent. Did you add the source and export it\"\n  )\n\ninterface FlagsMap {\n  [name: string]: string\n}\n\nexport const BUNDLED_FLAGS: FlagsMap = Object.freeze(\n  Object.keys(countries.flags).reduce(\n    (bundledFlags, name) => ({\n      ...bundledFlags,\n      [name]: (flags as FlagsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport interface FlagProps {\n  country: string\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n}\n\nexport const Flag = ({ country, size = 24 }: FlagProps) => {\n  const className = cx(\"cobalt-Flag\", {\n    \"cobalt-Flag--size16\": size === 16,\n    \"cobalt-Flag--size20\": size === 20,\n    \"cobalt-Flag--size32\": size === 32,\n  })\n\n  const countryFlag = BUNDLED_FLAGS[country]\n\n  if (countryFlag == null)\n    throw new Error(\n      `'${country}' Flag can not be found. Did you add the source and export it`\n    )\n\n  return (\n    <span\n      className={className}\n      dangerouslySetInnerHTML={{ __html: countryFlag }}\n    />\n  )\n}\n"],"names":["flags"],"mappings":";;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACtC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CACjC,CAAC,YAAY,EAAE,IAAI,MAAM;AACvB,IAAA,GAAG,YAAY;AACf,IAAA,CAAC,IAAI,GAAIA,KAAkB,CAAC,IAAI,CAAC;AAClC,CAAA,CAAC,EACF,EAAE,CACH,EACF;AAWM,MAAM,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAa,KAAI;AACxD,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,aAAa,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AACnC,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE1C,IAAI,WAAW,IAAI,IAAI;AACrB,QAAA,MAAM,IAAI,KAAK,CACb,IAAI,OAAO,CAAA,6DAAA,CAA+D,CAC3E,CAAA;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,SAAS,EACpB,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,EAAA,CAChD,EACH;AACH;;;;"}
+{"version":3,"file":"index.js","sources":["../../../src/components/Flag/index.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\nimport { countries } from \"../../tokens\"\n\nimport * as flags from \"../../icons/countries\"\nimport { eqSet } from \"../utils\"\n\nif (\n  !eqSet<string>(\n    new Set(Object.keys(flags)),\n    new Set(Object.keys(countries.flags))\n  )\n)\n  throw new Error(\n    \"Flag sources and tokens are not consistent. Did you add the source and export it\"\n  )\n\ninterface FlagsMap {\n  [name: string]: string\n}\n\nexport const BUNDLED_FLAGS: FlagsMap = Object.freeze(\n  Object.keys(countries.flags).reduce(\n    (bundledFlags, name) => ({\n      ...bundledFlags,\n      [name]: (flags as FlagsMap)[name],\n    }),\n    {}\n  )\n)\n\nexport interface FlagProps {\n  country: string\n  className?: string\n  /**\n   * Available size in px\n   * @default 24\n   */\n  size?: 16 | 20 | 24 | 32\n}\n\nexport const Flag = ({ country, size = 24, className }: FlagProps) => {\n  const _className = cx(\"cobalt-Flag\", className, {\n    \"cobalt-Flag--size16\": size === 16,\n    \"cobalt-Flag--size20\": size === 20,\n    \"cobalt-Flag--size32\": size === 32,\n  })\n\n  const countryFlag = BUNDLED_FLAGS[country]\n\n  if (countryFlag == null)\n    throw new Error(\n      `'${country}' Flag can not be found. Did you add the source and export it`\n    )\n\n  return (\n    <span\n      className={_className}\n      dangerouslySetInnerHTML={{ __html: countryFlag }}\n    />\n  )\n}\n"],"names":["flags"],"mappings":";;;;;;;AAOA,IACE,CAAC,KAAK,CACJ,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAACA,KAAK,CAAC,CAAC,EAC3B,IAAI,GAAG,CAAC,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,CACtC;AAED,IAAA,MAAM,IAAI,KAAK,CACb,kFAAkF,CACnF,CAAA;AAMU,MAAA,aAAa,GAAa,MAAM,CAAC,MAAM,CAClD,MAAM,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC,MAAM,CACjC,CAAC,YAAY,EAAE,IAAI,MAAM;AACvB,IAAA,GAAG,YAAY;AACf,IAAA,CAAC,IAAI,GAAIA,KAAkB,CAAC,IAAI,CAAC;AAClC,CAAA,CAAC,EACF,EAAE,CACH,EACF;AAYM,MAAM,IAAI,GAAG,CAAC,EAAE,OAAO,EAAE,IAAI,GAAG,EAAE,EAAE,SAAS,EAAa,KAAI;AACnE,IAAA,MAAM,UAAU,GAAG,EAAE,CAAC,aAAa,EAAE,SAAS,EAAE;QAC9C,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;QAClC,qBAAqB,EAAE,IAAI,KAAK,EAAE;AACnC,KAAA,CAAC,CAAA;AAEF,IAAA,MAAM,WAAW,GAAG,aAAa,CAAC,OAAO,CAAC,CAAA;IAE1C,IAAI,WAAW,IAAI,IAAI;AACrB,QAAA,MAAM,IAAI,KAAK,CACb,IAAI,OAAO,CAAA,6DAAA,CAA+D,CAC3E,CAAA;AAEH,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,MAAA,EAAA,EACE,SAAS,EAAE,UAAU,EACrB,uBAAuB,EAAE,EAAE,MAAM,EAAE,WAAW,EAAE,EAAA,CAChD,EACH;AACH;;;;"}

package/components/Form/RadioWithDetails.js

@@ -10,8 +10,8 @@ const RadioWithDetails = ({ icon, title, description, className, ...inputProps }
                     className: "cobalt-radio-with-details__icon",
                 }),
             React.createElement("div", { className: "cobalt-radio-with-details__content" },
-                React.createElement("p", { className: "cobalt-radio-with-details__title" }, title),
-                description && (React.createElement("p", { className: "cobalt-radio-with-details__description" }, description))),
+                React.createElement("div", { className: "cobalt-radio-with-details__title" }, title),
+                description && (React.createElement("div", { className: "cobalt-radio-with-details__description" }, description))),
             React.createElement("div", { className: "cobalt-radio-with-details__visual-input" }))));
 };
 

package/components/Form/RadioWithDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description?: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label\n      className={cx(\n        \"cobalt-radio-with-details\",\n        !description && \"cobalt-radio-with-details--noDescription\",\n        className\n      )}\n    >\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <p className=\"cobalt-radio-with-details__title\">{title}</p>\n          {description && (\n            <p className=\"cobalt-radio-with-details__description\">\n              {description}\n            </p>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACa,KAAI;AAC9B,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,2BAA2B,EAC3B,CAAC,WAAW,IAAI,0CAA0C,EAC1D,SAAS,CACV,EAAA;QAED,KACM,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAC5C,CAAA;QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;YAC9C,IAAI;AACH,gBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,oBAAA,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,gBAAA,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,kCAAkC,EAAA,EAAE,KAAK,CAAK;gBAC1D,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,GAAA,EAAA,EAAG,SAAS,EAAC,wCAAwC,EAClD,EAAA,WAAW,CACV,CACL,CACG;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}
+{"version":3,"file":"RadioWithDetails.js","sources":["../../../src/components/Form/RadioWithDetails.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nexport type RadioWithDetailsPropsType = {\n  icon?: JSX.Element\n  title: string\n  description?: string\n  name: string\n  className?: string\n} & React.InputHTMLAttributes<HTMLInputElement>\n\nconst RadioWithDetails = ({\n  icon,\n  title,\n  description,\n  className,\n  ...inputProps\n}: RadioWithDetailsPropsType) => {\n  return (\n    <label\n      className={cx(\n        \"cobalt-radio-with-details\",\n        !description && \"cobalt-radio-with-details--noDescription\",\n        className\n      )}\n    >\n      <input\n        {...inputProps}\n        type=\"radio\"\n        className=\"cobalt-radio-with-details__input\"\n      />\n      <div className=\"cobalt-radio-with-details__inner\">\n        {icon &&\n          React.cloneElement(icon, {\n            className: \"cobalt-radio-with-details__icon\",\n          })}\n        <div className=\"cobalt-radio-with-details__content\">\n          <div className=\"cobalt-radio-with-details__title\">{title}</div>\n          {description && (\n            <div className=\"cobalt-radio-with-details__description\">\n              {description}\n            </div>\n          )}\n        </div>\n        <div className=\"cobalt-radio-with-details__visual-input\" />\n      </div>\n    </label>\n  )\n}\n\nexport default RadioWithDetails\n"],"names":[],"mappings":";;;AAWA,MAAM,gBAAgB,GAAG,CAAC,EACxB,IAAI,EACJ,KAAK,EACL,WAAW,EACX,SAAS,EACT,GAAG,UAAU,EACa,KAAI;AAC9B,IAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EACE,SAAS,EAAE,EAAE,CACX,2BAA2B,EAC3B,CAAC,WAAW,IAAI,0CAA0C,EAC1D,SAAS,CACV,EAAA;QAED,KACM,CAAA,aAAA,CAAA,OAAA,EAAA,EAAA,GAAA,UAAU,EACd,IAAI,EAAC,OAAO,EACZ,SAAS,EAAC,kCAAkC,EAC5C,CAAA;QACF,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,kCAAkC,EAAA;YAC9C,IAAI;AACH,gBAAA,KAAK,CAAC,YAAY,CAAC,IAAI,EAAE;AACvB,oBAAA,SAAS,EAAE,iCAAiC;iBAC7C,CAAC;YACJ,KAAK,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAC,oCAAoC,EAAA;AACjD,gBAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,kCAAkC,EAAA,EAAE,KAAK,CAAO;gBAC9D,WAAW,KACV,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,wCAAwC,EACpD,EAAA,WAAW,CACR,CACP,CACG;AACN,YAAA,KAAA,CAAA,aAAA,CAAA,KAAA,EAAA,EAAK,SAAS,EAAC,yCAAyC,GAAG,CACvD,CACA,EACT;AACH;;;;"}

package/components/Layout/Components/LayoutCard.js

@@ -0,0 +1,15 @@
+import React from 'react';
+import cx from 'classnames';
+
+const LayoutCardItem = ({ children }) => {
+    return React.createElement("div", { className: "cobalt-layout-card__item" }, children);
+};
+const LayoutCard = ({ children, isPageHeader, }) => {
+    return (React.createElement("div", { className: cx("cobalt-layout-card", {
+            "cobalt-layout--isPageHeader": isPageHeader,
+        }) }, children));
+};
+LayoutCard.Item = LayoutCardItem;
+
+export { LayoutCard as default };
+//# sourceMappingURL=LayoutCard.js.map

package/components/Layout/Components/LayoutCard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutCard.js","sources":["../../../../src/components/Layout/Components/LayoutCard.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nconst LayoutCardItem = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"cobalt-layout-card__item\">{children}</div>\n}\n\nconst LayoutCard = ({\n  children,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isPageHeader?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-card\", {\n        \"cobalt-layout--isPageHeader\": isPageHeader,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nLayoutCard.Item = LayoutCardItem\n\nexport default LayoutCard\n"],"names":[],"mappings":";;;AAGA,MAAM,cAAc,GAAG,CAAC,EAAE,QAAQ,EAAiC,KAAI;AACrE,IAAA,OAAO,6BAAK,SAAS,EAAC,0BAA0B,EAAE,EAAA,QAAQ,CAAO,CAAA;AACnE,CAAC,CAAA;AAEK,MAAA,UAAU,GAAG,CAAC,EAClB,QAAQ,EACR,YAAY,GAIb,KAAI;AACH,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,oBAAoB,EAAE;AAClC,YAAA,6BAA6B,EAAE,YAAY;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH,EAAC;AAED,UAAU,CAAC,IAAI,GAAG,cAAc;;;;"}

package/components/Layout/Components/LayoutSection.js

@@ -0,0 +1,11 @@
+import React from 'react';
+import cx from 'classnames';
+
+const LayoutSection = ({ children, isPageHeader, }) => {
+    return (React.createElement("div", { className: cx("cobalt-layout-section", {
+            "cobalt-layout--isPageHeader": isPageHeader,
+        }) }, children));
+};
+
+export { LayoutSection as default };
+//# sourceMappingURL=LayoutSection.js.map

package/components/Layout/Components/LayoutSection.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSection.js","sources":["../../../../src/components/Layout/Components/LayoutSection.tsx"],"sourcesContent":["import React from \"react\"\nimport cx from \"classnames\"\n\nconst LayoutSection = ({\n  children,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isPageHeader?: boolean\n}) => {\n  return (\n    <div\n      className={cx(\"cobalt-layout-section\", {\n        \"cobalt-layout--isPageHeader\": isPageHeader,\n      })}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport default LayoutSection\n"],"names":[],"mappings":";;;AAGM,MAAA,aAAa,GAAG,CAAC,EACrB,QAAQ,EACR,YAAY,GAIb,KAAI;AACH,IAAA,QACE,KACE,CAAA,aAAA,CAAA,KAAA,EAAA,EAAA,SAAS,EAAE,EAAE,CAAC,uBAAuB,EAAE;AACrC,YAAA,6BAA6B,EAAE,YAAY;AAC5C,SAAA,CAAC,EAED,EAAA,QAAQ,CACL,EACP;AACH;;;;"}

package/components/Layout/Components/LayoutSectionTitle.js

@@ -0,0 +1,8 @@
+import React from 'react';
+
+const LayoutSectionTitle = ({ children }) => {
+    return React.createElement("h2", { className: "cobalt-layout-section-title" }, children);
+};
+
+export { LayoutSectionTitle as default };
+//# sourceMappingURL=LayoutSectionTitle.js.map

package/components/Layout/Components/LayoutSectionTitle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutSectionTitle.js","sources":["../../../../src/components/Layout/Components/LayoutSectionTitle.tsx"],"sourcesContent":["import React from \"react\"\n\nconst LayoutSectionTitle = ({ children }: { children: string }) => {\n  return <h2 className=\"cobalt-layout-section-title\">{children}</h2>\n}\n\nexport default LayoutSectionTitle\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB,GAAG,CAAC,EAAE,QAAQ,EAAwB,KAAI;AAChE,IAAA,OAAO,4BAAI,SAAS,EAAC,6BAA6B,EAAE,EAAA,QAAQ,CAAM,CAAA;AACpE;;;;"}

package/components/Layout/Components/LayoutStack.js

@@ -0,0 +1,44 @@
+import { nanoid } from 'nanoid';
+import React, { Children, cloneElement, isValidElement } from 'react';
+import cx from 'classnames';
+
+const LayoutStackItem = ({ children, isTable }) => {
+    const Comp = isTable ? "tr" : "div";
+    return React.createElement(Comp, { className: "cobalt-layout-stack__item" }, children);
+};
+const isStackItem = (child) => {
+    return isValidElement(child) && child.type === LayoutStackItem;
+};
+const LayoutStack = ({ children, isTable, isPageHeader, }) => {
+    const headerElements = [];
+    const bodyElements = [];
+    const content = Children.map(children, (child) => {
+        if (isStackItem(child)) {
+            const newChild = cloneElement(child, { isTable, key: nanoid() });
+            if (newChild.props.isTable) {
+                if (newChild.props.isPageHeader) {
+                    headerElements.push(newChild);
+                }
+                else {
+                    bodyElements.push(newChild);
+                }
+            }
+        }
+        return child;
+    });
+    const className = cx("cobalt-layout-stack", {
+        "cobalt-layout--isPageHeader": isPageHeader,
+    });
+    if (isTable) {
+        return (React.createElement("table", { className: className },
+            !!headerElements.length && React.createElement("thead", null, headerElements),
+            React.createElement("tbody", null, bodyElements)));
+    }
+    else {
+        return React.createElement("div", { className: className }, content);
+    }
+};
+LayoutStack.Item = LayoutStackItem;
+
+export { LayoutStack as default };
+//# sourceMappingURL=LayoutStack.js.map

package/components/Layout/Components/LayoutStack.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"LayoutStack.js","sources":["../../../../src/components/Layout/Components/LayoutStack.tsx"],"sourcesContent":["import { nanoid } from \"nanoid\"\nimport React, { Children, isValidElement, cloneElement } from \"react\"\nimport cx from \"classnames\"\n\ntype LayoutStackItemPropsType =\n  | {\n      children: React.ReactNode\n      isTable: never\n      isPageHeader: never\n    }\n  | {\n      children: React.ReactNode\n      isPageHeader?: boolean\n      isTable?: boolean\n    }\n\nconst LayoutStackItem = ({ children, isTable }: LayoutStackItemPropsType) => {\n  const Comp = isTable ? \"tr\" : \"div\"\n  return <Comp className=\"cobalt-layout-stack__item\">{children}</Comp>\n}\n\nconst isStackItem = (\n  child: React.ReactNode\n): child is React.ReactElement<Omit<LayoutStackItemPropsType, \"children\">> => {\n  return isValidElement(child) && child.type === LayoutStackItem\n}\n\nconst LayoutStack = ({\n  children,\n  isTable,\n  isPageHeader,\n}: {\n  children: React.ReactNode\n  isTable?: boolean\n  isPageHeader?: boolean\n}) => {\n  const headerElements: React.ReactElement[] = []\n  const bodyElements: React.ReactElement[] = []\n  const content = Children.map(children, (child) => {\n    if (isStackItem(child)) {\n      const newChild = cloneElement(child, { isTable, key: nanoid() })\n      if (newChild.props.isTable) {\n        if (newChild.props.isPageHeader) {\n          headerElements.push(newChild)\n        } else {\n          bodyElements.push(newChild)\n        }\n      }\n    }\n    return child\n  })\n  const className = cx(\"cobalt-layout-stack\", {\n    \"cobalt-layout--isPageHeader\": isPageHeader,\n  })\n  if (isTable) {\n    return (\n      <table className={className}>\n        {!!headerElements.length && <thead>{headerElements}</thead>}\n        <tbody>{bodyElements}</tbody>\n      </table>\n    )\n  } else {\n    return <div className={className}>{content}</div>\n  }\n}\n\nLayoutStack.Item = LayoutStackItem\n\nexport default LayoutStack\n"],"names":[],"mappings":";;;;AAgBA,MAAM,eAAe,GAAG,CAAC,EAAE,QAAQ,EAAE,OAAO,EAA4B,KAAI;IAC1E,MAAM,IAAI,GAAG,OAAO,GAAG,IAAI,GAAG,KAAK,CAAA;IACnC,OAAO,KAAA,CAAA,aAAA,CAAC,IAAI,EAAC,EAAA,SAAS,EAAC,2BAA2B,EAAA,EAAE,QAAQ,CAAQ,CAAA;AACtE,CAAC,CAAA;AAED,MAAM,WAAW,GAAG,CAClB,KAAsB,KACqD;IAC3E,OAAO,cAAc,CAAC,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,eAAe,CAAA;AAChE,CAAC,CAAA;AAEK,MAAA,WAAW,GAAG,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,YAAY,GAKb,KAAI;IACH,MAAM,cAAc,GAAyB,EAAE,CAAA;IAC/C,MAAM,YAAY,GAAyB,EAAE,CAAA;IAC7C,MAAM,OAAO,GAAG,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,KAAK,KAAI;AAC/C,QAAA,IAAI,WAAW,CAAC,KAAK,CAAC,EAAE;AACtB,YAAA,MAAM,QAAQ,GAAG,YAAY,CAAC,KAAK,EAAE,EAAE,OAAO,EAAE,GAAG,EAAE,MAAM,EAAE,EAAE,CAAC,CAAA;AAChE,YAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,OAAO,EAAE;AAC1B,gBAAA,IAAI,QAAQ,CAAC,KAAK,CAAC,YAAY,EAAE;AAC/B,oBAAA,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC9B;qBAAM;AACL,oBAAA,YAAY,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;iBAC5B;aACF;SACF;AACD,QAAA,OAAO,KAAK,CAAA;AACd,KAAC,CAAC,CAAA;AACF,IAAA,MAAM,SAAS,GAAG,EAAE,CAAC,qBAAqB,EAAE;AAC1C,QAAA,6BAA6B,EAAE,YAAY;AAC5C,KAAA,CAAC,CAAA;IACF,IAAI,OAAO,EAAE;AACX,QAAA,QACE,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,EAAO,SAAS,EAAE,SAAS,EAAA;AACxB,YAAA,CAAC,CAAC,cAAc,CAAC,MAAM,IAAI,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,cAAc,CAAS;AAC3D,YAAA,KAAA,CAAA,aAAA,CAAA,OAAA,EAAA,IAAA,EAAQ,YAAY,CAAS,CACvB,EACT;KACF;SAAM;AACL,QAAA,OAAO,6BAAK,SAAS,EAAE,SAAS,EAAG,EAAA,OAAO,CAAO,CAAA;KAClD;AACH,EAAC;AAED,WAAW,CAAC,IAAI,GAAG,eAAe;;;;"}

package/index.js

@@ -47,6 +47,10 @@ export { ToggleSwitch } from './components/Form/ToggleSwitch.js';
 export { CalendarView } from './components/Calendar/CalendarView/index.js';
 export { default as Popover } from './components/Popover/index.js';
 export { default as HorizontalList, HorizontalListPaddingBlock } from './components/HorizontalList/index.js';
+export { default as LayoutSection } from './components/Layout/Components/LayoutSection.js';
+export { default as LayoutSectionTitle } from './components/Layout/Components/LayoutSectionTitle.js';
+export { default as LayoutCard } from './components/Layout/Components/LayoutCard.js';
+export { default as LayoutStack } from './components/Layout/Components/LayoutStack.js';
 export { default as useBreakpoint } from './hooks/useBreakpoint.js';
 export { getMonthDaysByWeeks, getWeekDays } from './components/Calendar/utils.js';
 export { default as AccountDetailsIcon } from './components/Icon/__generated__/AccountDetailsIcon.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.42.3",
+  "version": "0.42.4",
   "description": "Opinionated design system for Drivy's projects.",
   "main": "src/index.js",
   "types": "types/index.d.ts",

package/styles/components/Form/RadioWithDetails.scss

@@ -23,12 +23,13 @@
     border-radius: border-radius(lg);
 
     transition: all 120ms ease-in-out;
+
+    gap: spacing(xs);
   }
 
   .cobalt-radio-with-details__icon {
     flex-shrink: 0;
     margin: 0;
-    margin-right: spacing(xs);
   }
 
   .cobalt-radio-with-details__content {
@@ -43,14 +44,16 @@
     @include text-color(base);
     font-size: 14px;
     font-weight: 600;
-    line-height: 18px;
+    line-height: 20px;
 
     transition: color 150ms ease-in-out;
   }
 
   .cobalt-radio-with-details__description {
-    @include c-text-body-sm;
     @include text-color(subdued);
+    font-family: font-family(base);
+    font-size: 14px;
+    line-height: 20px;
 
     transition: color 150ms ease-in-out;
   }
@@ -105,6 +108,14 @@
       @include bg-color(accentAlt);
     }
 
+    &:checked + #{ $self }__inner .cobalt-Icon {
+      @include fill-color(accent);
+    }
+
+    &:checked + #{ $self }__inner .cobalt-contained-icon {
+      @include bg-color(accentAlt);
+    }
+
     &:checked + #{ $self }__inner #{ $self }__visual-input {
       @include semantic-color(icon, accentAlt, border-color);
     }

package/styles/components/Icon/iconColors.scss

@@ -6,62 +6,22 @@
   fill: var(--c-icon-base);
 }
 
-.cobalt-Icon--colorBaseInteractive {
-  fill: var(--c-icon-baseInteractive);
-}
-
-.cobalt-Icon--colorBaseInteractive:hover,
-.cobalt-Icon--colorBaseInteractive:focus {
-  fill: var(--c-icon-baseInteractive--hover);
-}
-
 .cobalt-Icon--colorSubdued {
   fill: var(--c-icon-subdued);
 }
 
-.cobalt-Icon--colorSubduedInteractive {
-  fill: var(--c-icon-subduedInteractive);
-}
-
-.cobalt-Icon--colorSubduedInteractive:hover,
-.cobalt-Icon--colorSubduedInteractive:focus {
-  fill: var(--c-icon-subduedInteractive--hover);
-}
-
 .cobalt-Icon--colorAccent {
   fill: var(--c-icon-accent);
 }
 
-.cobalt-Icon--colorAccentInteractive {
-  fill: var(--c-icon-accentInteractive);
-}
-
-.cobalt-Icon--colorAccentInteractive:hover,
-.cobalt-Icon--colorAccentInteractive:focus {
-  fill: var(--c-icon-accentInteractive--hover);
-}
-
 .cobalt-Icon--colorAccentAlt {
   fill: var(--c-icon-accentAlt);
 }
 
-.cobalt-Icon--colorAccentAltInteractive {
-  fill: var(--c-icon-accentAltInteractive);
-}
-
-.cobalt-Icon--colorAccentAltInteractive:hover,
-.cobalt-Icon--colorAccentAltInteractive:focus {
-  fill: var(--c-icon-accentAltInteractive--hover);
-}
-
 .cobalt-Icon--colorInfo {
   fill: var(--c-icon-info);
 }
 
-.cobalt-Icon--colorInfoAlt {
-  fill: var(--c-icon-infoAlt);
-}
-
 .cobalt-Icon--colorError {
   fill: var(--c-icon-error);
 }
@@ -78,10 +38,6 @@
   fill: var(--c-icon-successAlt);
 }
 
-.cobalt-Icon--colorWarning {
-  fill: var(--c-icon-warning);
-}
-
 .cobalt-Icon--colorConnect {
   fill: var(--c-icon-connect);
 }
@@ -98,18 +54,74 @@
   fill: var(--c-icon-owner);
 }
 
-.cobalt-Icon--colorInversed {
-  fill: var(--c-icon-inversed);
-}
-
 .cobalt-Icon--colorDisabled {
   fill: var(--c-icon-disabled);
 }
 
-.cobalt-Icon--colorRideShare {
-  fill: var(--c-icon-rideShare);
+.cobalt-Icon--colorDisabledAlt {
+  fill: var(--c-icon-disabledAlt);
+}
+
+.cobalt-Icon--colorWarning {
+  fill: var(--c-icon-warning);
+}
+
+.cobalt-Icon--colorInfoAlt {
+  fill: var(--c-icon-infoAlt);
+}
+
+.cobalt-Icon--colorOnAccent {
+  fill: var(--c-icon-onAccent);
+}
+
+.cobalt-Icon--colorRideshare {
+  fill: var(--c-icon-rideshare);
+}
+
+.cobalt-Icon--colorOnRideshare {
+  fill: var(--c-icon-onRideshare);
+}
+
+.cobalt-Icon--colorOnSuccess {
+  fill: var(--c-icon-onSuccess);
 }
 
-.cobalt-Icon--colorOnRideShare {
-  fill: var(--c-icon-onRideShare);
+.cobalt-Icon--colorOnError {
+  fill: var(--c-icon-onError);
+}
+
+.cobalt-Icon--colorBaseInteractive {
+  fill: var(--c-icon-baseInteractive);
+}
+
+.cobalt-Icon--colorBaseInteractive:hover,
+.cobalt-Icon--colorBaseInteractive:focus {
+  fill: var(--c-icon-baseInteractive--hover);
+}
+
+.cobalt-Icon--colorSubduedInteractive {
+  fill: var(--c-icon-subduedInteractive);
+}
+
+.cobalt-Icon--colorSubduedInteractive:hover,
+.cobalt-Icon--colorSubduedInteractive:focus {
+  fill: var(--c-icon-subduedInteractive--hover);
+}
+
+.cobalt-Icon--colorAccentInteractive {
+  fill: var(--c-icon-accentInteractive);
+}
+
+.cobalt-Icon--colorAccentInteractive:hover,
+.cobalt-Icon--colorAccentInteractive:focus {
+  fill: var(--c-icon-accentInteractive--hover);
+}
+
+.cobalt-Icon--colorAccentAltInteractive {
+  fill: var(--c-icon-accentAltInteractive);
+}
+
+.cobalt-Icon--colorAccentAltInteractive:hover,
+.cobalt-Icon--colorAccentAltInteractive:focus {
+  fill: var(--c-icon-accentAltInteractive--hover);
 }

package/styles/components/PlateNumber/index.scss

@@ -11,6 +11,8 @@
 
   padding: 2px spacing("2xs");
 
+  font-family: font-family(base);
+
   font-size: 14px;
 
   font-weight: 600;
@@ -18,4 +20,6 @@
   line-height: 14px;
 
   border-radius: border-radius();
+
+  letter-spacing: normal;
 }

package/styles/components/Tag/index.scss

@@ -10,6 +10,8 @@
 
     padding: 2px spacing("2xs");
 
+    font-family: font-family(base);
+
     font-size: 14px;
 
     font-weight: 600;
@@ -17,6 +19,8 @@
     line-height: 16px;
 
     border-radius: border-radius();
+
+    letter-spacing: normal;
   }
 
   &Tag--muted {