@strapi/design-system 0.0.0-typescript.0 → 0.0.0-typescript.1

package/dist/BaseButton/BaseButton.cjs

@@ -1,4 +1,4 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react"),i=require("prop-types"),c=require("styled-components"),p=require("../themes/utils.cjs"),s=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},o=s(n),r=s(i),f=s(c),a=f.default.button`
+"use strict";var y=Object.defineProperty,B=Object.defineProperties;var g=Object.getOwnPropertyDescriptors;var o=Object.getOwnPropertySymbols;var n=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var u=(e,t,s)=>t in e?y(e,t,{enumerable:!0,configurable:!0,writable:!0,value:s}):e[t]=s,d=(e,t)=>{for(var s in t||(t={}))n.call(t,s)&&u(e,s,t[s]);if(o)for(var s of o(t))l.call(t,s)&&u(e,s,t[s]);return e},i=(e,t)=>B(e,g(t));var c=(e,t)=>{var s={};for(var r in e)n.call(e,r)&&t.indexOf(r)<0&&(s[r]=e[r]);if(e!=null&&o)for(var r of o(e))t.indexOf(r)<0&&l.call(e,r)&&(s[r]=e[r]);return s};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const $=require("react/jsx-runtime"),_=require("react"),h=require("styled-components"),j=require("../themes/utils.cjs"),p=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},m=p(_),v=p(h),f=v.default.button`
   display: flex;
   cursor: pointer;
   padding: ${({theme:e})=>e.spaces[2]};
@@ -19,5 +19,5 @@
     pointer-events: none;
   }
 
-  ${p.buttonFocusStyle}
-`,t=o.default.forwardRef(({disabled:e,children:u,...l},d)=>o.default.createElement(a,{ref:d,"aria-disabled":e,type:"button",disabled:e,...l},u));t.displayName="BaseButton";t.defaultProps={disabled:!1};t.propTypes={children:r.default.node.isRequired,disabled:r.default.bool};exports.BaseButton=t;exports.BaseButtonWrapper=a;
+  ${j.buttonFocusStyle}
+`,b=m.default.forwardRef((x,r)=>{var a=x,{disabled:e,children:t}=a,s=c(a,["disabled","children"]);return $.jsx(f,i(d({ref:r,"aria-disabled":e,type:"button",disabled:e},s),{children:t}))});b.displayName="BaseButton";exports.BaseButton=b;exports.BaseButtonWrapper=f;

package/dist/BaseButton/BaseButton.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export declare const BaseButtonWrapper: import("styled-components").StyledComponent<"button", import("styled-components").DefaultTheme, {}, never>;
+export interface BaseButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    children: React.ReactNode;
+}
+export declare const BaseButton: React.ForwardRefExoticComponent<BaseButtonProps & React.RefAttributes<HTMLButtonElement>>;

package/dist/BaseButton/BaseButton.js

@@ -1,45 +1,83 @@
-import o from "react";
-import t from "prop-types";
-import p from "styled-components";
-import { buttonFocusStyle as i } from "../themes/utils.js";
-const l = p.button`
+var c = Object.defineProperty, f = Object.defineProperties;
+var b = Object.getOwnPropertyDescriptors;
+var s = Object.getOwnPropertySymbols;
+var i = Object.prototype.hasOwnProperty, n = Object.prototype.propertyIsEnumerable;
+var d = (r, t, e) => t in r ? c(r, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : r[t] = e, l = (r, t) => {
+  for (var e in t || (t = {}))
+    i.call(t, e) && d(r, e, t[e]);
+  if (s)
+    for (var e of s(t))
+      n.call(t, e) && d(r, e, t[e]);
+  return r;
+}, p = (r, t) => f(r, b(t));
+var u = (r, t) => {
+  var e = {};
+  for (var o in r)
+    i.call(r, o) && t.indexOf(o) < 0 && (e[o] = r[o]);
+  if (r != null && s)
+    for (var o of s(r))
+      t.indexOf(o) < 0 && n.call(r, o) && (e[o] = r[o]);
+  return e;
+};
+import { jsx as m } from "react/jsx-runtime";
+import $ from "react";
+import g from "styled-components";
+import { buttonFocusStyle as B } from "../themes/utils.js";
+const h = g.button`
   display: flex;
   cursor: pointer;
-  padding: ${({ theme: e }) => e.spaces[2]};
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  background: ${({ theme: e }) => e.colors.neutral0};
-  border: 1px solid ${({ theme: e }) => e.colors.neutral200};
+  padding: ${({
+  theme: r
+}) => r.spaces[2]};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
+  background: ${({
+  theme: r
+}) => r.colors.neutral0};
+  border: 1px solid ${({
+  theme: r
+}) => r.colors.neutral200};
   svg {
-    height: ${({ theme: e }) => e.spaces[3]};
-    width: ${({ theme: e }) => e.spaces[3]};
+    height: ${({
+  theme: r
+}) => r.spaces[3]};
+    width: ${({
+  theme: r
+}) => r.spaces[3]};
   }
   svg {
     > g,
     path {
-      fill: ${({ theme: e }) => e.colors.neutral0};
+      fill: ${({
+  theme: r
+}) => r.colors.neutral0};
     }
   }
   &[aria-disabled='true'] {
     pointer-events: none;
   }
 
-  ${i}
-`, r = o.forwardRef(({ disabled: e, children: s, ...a }, d) => /* @__PURE__ */ o.createElement(l, {
-  ref: d,
-  "aria-disabled": e,
-  type: "button",
-  disabled: e,
-  ...a
-}, s));
-r.displayName = "BaseButton";
-r.defaultProps = {
-  disabled: !1
-};
-r.propTypes = {
-  children: t.node.isRequired,
-  disabled: t.bool
-};
+  ${B}
+`, y = $.forwardRef((x, o) => {
+  var a = x, {
+    disabled: r,
+    children: t
+  } = a, e = u(a, [
+    "disabled",
+    "children"
+  ]);
+  return m(h, p(l({
+    ref: o,
+    "aria-disabled": r,
+    type: "button",
+    disabled: r
+  }, e), {
+    children: t
+  }));
+});
+y.displayName = "BaseButton";
 export {
-  r as BaseButton,
-  l as BaseButtonWrapper
+  y as BaseButton,
+  h as BaseButtonWrapper
 };

package/dist/BaseButton/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseButton';

package/dist/BaseCheckbox/BaseCheckbox.cjs

@@ -1,7 +1,7 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("react"),f=require("prop-types"),k=require("styled-components"),h=require("../Box/Box.cjs"),n=require("./utils.cjs"),g=require("./assets/checkmark.cjs"),m=require("./assets/checkmark-black.cjs"),c=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=c(a),r=c(f),x=c(k),y=x.default.input`
+"use strict";var m=Object.defineProperty;var a=Object.getOwnPropertySymbols;var i=Object.prototype.hasOwnProperty,u=Object.prototype.propertyIsEnumerable;var l=(e,o,r)=>o in e?m(e,o,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[o]=r,d=(e,o)=>{for(var r in o||(o={}))i.call(o,r)&&l(e,r,o[r]);if(a)for(var r of a(o))u.call(o,r)&&l(e,r,o[r]);return e};var b=(e,o)=>{var r={};for(var t in e)i.call(e,t)&&o.indexOf(t)<0&&(r[t]=e[t]);if(e!=null&&a)for(var t of a(e))o.indexOf(t)<0&&u.call(e,t)&&(r[t]=e[t]);return r};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const p=require("react/jsx-runtime"),k=require("react"),$=require("styled-components"),y=require("../Box/Box.cjs"),h=require("./utils.cjs"),j=require("./assets/checkmark.cjs"),B=require("./assets/checkmark-black.cjs"),q=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},C=q($),w=C.default.input`
+  height: ${h.getCheckboxSize};
+  min-width: ${h.getCheckboxSize};
   margin: 0;
-  height: ${n.getCheckboxSize};
-  min-width: ${n.getCheckboxSize};
   border-radius: ${({theme:e})=>e.borderRadius};
   border: 1px solid ${({theme:e})=>e.colors.neutral300};
   -webkit-appearance: none;
@@ -16,7 +16,7 @@
       content: '';
       display: block;
       position: relative;
-      background: url(${g}) no-repeat no-repeat center center;
+      background: url(${j}) no-repeat no-repeat center center;
       width: 10px;
       height: 10px;
       left: 50%;
@@ -25,7 +25,7 @@
     }
 
     &:disabled:after {
-      background: url(${m}) no-repeat no-repeat center center;
+      background: url(${B}) no-repeat no-repeat center center;
     }
   }
 
@@ -59,4 +59,4 @@
       }
     }
   }
-`,t=({indeterminate:e,size:u,name:i,value:l,onValueChange:d,...p})=>{const o=a.useRef();a.useEffect(()=>{o.current&&e?o.current.indeterminate=e:o.current.indeterminate=!1},[e]);const b=()=>{d(!l)};return s.default.createElement(h.Box,null,s.default.createElement(y,{size:u,checked:l,onChange:b,type:"checkbox",ref:o,name:i,...p}))};t.displayName="BaseCheckbox";t.defaultProps={indeterminate:!1,name:null,onValueChange(){},size:"M",value:!1};t.propTypes={indeterminate:r.default.bool,name:r.default.string,onValueChange:r.default.func,size:r.default.oneOf(["M","L"]),value:r.default.bool};exports.BaseCheckbox=t;
+`,f=R=>{var n=R,{indeterminate:e=!1,size:o="M",name:r,value:t=!1,onValueChange:s}=n,x=b(n,["indeterminate","size","name","value","onValueChange"]);const c=k.useRef(null);k.useEffect(()=>{c.current&&e?c.current.indeterminate=e:c.current.indeterminate=!1},[e]);const g=()=>{s&&s(!t)};return p.jsx(y.Box,{children:p.jsx(w,d({size:o,checked:t,onChange:g,type:"checkbox",ref:c,name:r},x))})};f.displayName="BaseCheckbox";exports.BaseCheckbox=f;

package/dist/BaseCheckbox/BaseCheckbox.d.ts

@@ -0,0 +1,28 @@
+export type BaseCheckboxSize = 'S' | 'M';
+export interface CheckboxInputProps {
+    size: BaseCheckboxSize;
+}
+export interface BaseCheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'value'> {
+    /**
+     * If `true`, display the indeterminate state.
+     */
+    indeterminate?: boolean;
+    /**
+     * `Checkbox` input name
+     */
+    name?: string;
+    /**
+     * The callback invoked when click on the `Checkbox`
+     * `(value: Bool) => {}`
+     */
+    onValueChange?: (isChecked: boolean) => void;
+    /**
+     * Set the size of the checkbox
+     */
+    size?: BaseCheckboxSize;
+    value?: boolean;
+}
+export declare const BaseCheckbox: {
+    ({ indeterminate, size, name, value, onValueChange, ...inputProps }: BaseCheckboxProps): JSX.Element;
+    displayName: string;
+};

package/dist/BaseCheckbox/BaseCheckbox.js

@@ -1,29 +1,59 @@
-import n, { useRef as u, useEffect as m } from "react";
-import r from "prop-types";
-import b from "styled-components";
-import { Box as f } from "../Box/Box.js";
-import { getCheckboxSize as l } from "./utils.js";
-import h from "./assets/checkmark.js";
-import k from "./assets/checkmark-black.js";
-const g = b.input`
+var h = Object.defineProperty;
+var c = Object.getOwnPropertySymbols;
+var s = Object.prototype.hasOwnProperty, d = Object.prototype.propertyIsEnumerable;
+var i = (r, e, o) => e in r ? h(r, e, { enumerable: !0, configurable: !0, writable: !0, value: o }) : r[e] = o, p = (r, e) => {
+  for (var o in e || (e = {}))
+    s.call(e, o) && i(r, o, e[o]);
+  if (c)
+    for (var o of c(e))
+      d.call(e, o) && i(r, o, e[o]);
+  return r;
+};
+var u = (r, e) => {
+  var o = {};
+  for (var t in r)
+    s.call(r, t) && e.indexOf(t) < 0 && (o[t] = r[t]);
+  if (r != null && c)
+    for (var t of c(r))
+      e.indexOf(t) < 0 && d.call(r, t) && (o[t] = r[t]);
+  return o;
+};
+import { jsx as b } from "react/jsx-runtime";
+import { useRef as k, useEffect as x } from "react";
+import $ from "styled-components";
+import { Box as g } from "../Box/Box.js";
+import { getCheckboxSize as m } from "./utils.js";
+import y from "./assets/checkmark.js";
+import C from "./assets/checkmark-black.js";
+const w = $.input`
+  height: ${m};
+  min-width: ${m};
   margin: 0;
-  height: ${l};
-  min-width: ${l};
-  border-radius: ${({ theme: e }) => e.borderRadius};
-  border: 1px solid ${({ theme: e }) => e.colors.neutral300};
+  border-radius: ${({
+  theme: r
+}) => r.borderRadius};
+  border: 1px solid ${({
+  theme: r
+}) => r.colors.neutral300};
   -webkit-appearance: none;
-  background-color: ${({ theme: e }) => e.colors.neutral0};
+  background-color: ${({
+  theme: r
+}) => r.colors.neutral0};
   cursor: pointer;
 
   &:checked {
-    background-color: ${({ theme: e }) => e.colors.primary600};
-    border: 1px solid ${({ theme: e }) => e.colors.primary600};
+    background-color: ${({
+  theme: r
+}) => r.colors.primary600};
+    border: 1px solid ${({
+  theme: r
+}) => r.colors.primary600};
 
     &:after {
       content: '';
       display: block;
       position: relative;
-      background: url(${h}) no-repeat no-repeat center center;
+      background: url(${y}) no-repeat no-repeat center center;
       width: 10px;
       height: 10px;
       left: 50%;
@@ -32,18 +62,26 @@ const g = b.input`
     }
 
     &:disabled:after {
-      background: url(${k}) no-repeat no-repeat center center;
+      background: url(${C}) no-repeat no-repeat center center;
     }
   }
 
   &:disabled {
-    background-color: ${({ theme: e }) => e.colors.neutral200};
-    border: 1px solid ${({ theme: e }) => e.colors.neutral300};
+    background-color: ${({
+  theme: r
+}) => r.colors.neutral200};
+    border: 1px solid ${({
+  theme: r
+}) => r.colors.neutral300};
   }
 
   &:indeterminate {
-    background-color: ${({ theme: e }) => e.colors.primary600};
-    border: 1px solid ${({ theme: e }) => e.colors.primary600};
+    background-color: ${({
+  theme: r
+}) => r.colors.primary600};
+    border: 1px solid ${({
+  theme: r
+}) => r.colors.primary600};
 
     &:after {
       content: '';
@@ -52,54 +90,59 @@ const g = b.input`
       color: white;
       height: 2px;
       width: 10px;
-      background-color: ${({ theme: e }) => e.colors.neutral0};
+      background-color: ${({
+  theme: r
+}) => r.colors.neutral0};
       left: 50%;
       top: 50%;
       transform: translateX(-50%) translateY(-50%);
     }
 
     &:disabled {
-      background-color: ${({ theme: e }) => e.colors.neutral200};
-      border: 1px solid ${({ theme: e }) => e.colors.neutral300};
+      background-color: ${({
+  theme: r
+}) => r.colors.neutral200};
+      border: 1px solid ${({
+  theme: r
+}) => r.colors.neutral300};
       &:after {
-        background-color: ${({ theme: e }) => e.colors.neutral500};
+        background-color: ${({
+  theme: r
+}) => r.colors.neutral500};
       }
     }
   }
-`, t = ({ indeterminate: e, size: c, name: i, value: a, onValueChange: s, ...d }) => {
-  const o = u();
-  m(() => {
-    o.current && e ? o.current.indeterminate = e : o.current.indeterminate = !1;
-  }, [e]);
-  const p = () => {
-    s(!a);
-  };
-  return /* @__PURE__ */ n.createElement(f, null, /* @__PURE__ */ n.createElement(g, {
-    size: c,
-    checked: a,
-    onChange: p,
-    type: "checkbox",
-    ref: o,
-    name: i,
-    ...d
-  }));
-};
-t.displayName = "BaseCheckbox";
-t.defaultProps = {
-  indeterminate: !1,
-  name: null,
-  onValueChange() {
-  },
-  size: "M",
-  value: !1
-};
-t.propTypes = {
-  indeterminate: r.bool,
-  name: r.string,
-  onValueChange: r.func,
-  size: r.oneOf(["M", "L"]),
-  value: r.bool
+`, B = (I) => {
+  var l = I, {
+    indeterminate: r = !1,
+    size: e = "M",
+    name: o,
+    value: t = !1,
+    onValueChange: n
+  } = l, f = u(l, [
+    "indeterminate",
+    "size",
+    "name",
+    "value",
+    "onValueChange"
+  ]);
+  const a = k(null);
+  return x(() => {
+    a.current && r ? a.current.indeterminate = r : a.current.indeterminate = !1;
+  }, [r]), b(g, {
+    children: b(w, p({
+      size: e,
+      checked: t,
+      onChange: () => {
+        n && n(!t);
+      },
+      type: "checkbox",
+      ref: a,
+      name: o
+    }, f))
+  });
 };
+B.displayName = "BaseCheckbox";
 export {
-  t as BaseCheckbox
+  B as BaseCheckbox
 };

package/dist/BaseCheckbox/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseCheckbox';

package/dist/BaseCheckbox/utils.d.ts

@@ -0,0 +1,7 @@
+/**
+ * TODO: Look into why setting the type to `BaseCheckboxSize` makes the
+ * component in `BaseCheckbox` loose all type information to do with the theme.
+ */
+export declare const getCheckboxSize: ({ size }: {
+    size: any;
+}) => "20px" | "18px";

package/dist/BaseLink/BaseLink.cjs

@@ -1,3 +1,3 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const i=require("react"),c=require("prop-types"),p=require("styled-components"),a=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},s=a(i),t=a(c),y=a(p),_=y.default.a`
+"use strict";var j=Object.defineProperty;var n=Object.getOwnPropertySymbols;var l=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable;var u=(e,r,t)=>r in e?j(e,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[r]=t,f=(e,r)=>{for(var t in r||(r={}))l.call(r,t)&&u(e,t,r[t]);if(n)for(var t of n(r))c.call(r,t)&&u(e,t,r[t]);return e};var i=(e,r)=>{var t={};for(var a in e)l.call(e,a)&&r.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&n)for(var a of n(e))r.indexOf(a)<0&&c.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const m=require("react/jsx-runtime"),b=require("react"),g=require("styled-components"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},k=d(b),L=d(g),R=L.default.a`
   cursor: pointer;
-`,r=s.default.forwardRef(({href:e,rel:n,target:d,disabled:l,isExternal:o,...f},u)=>s.default.createElement(_,{ref:u,target:o?"_blank":d,rel:o?n:void 0,href:l?"#":e,disabled:l,...f}));r.displayName="BaseLink";r.defaultProps={disabled:!1,href:void 0,isExternal:!1,rel:"noreferrer noopener",target:"_self"};r.propTypes={disabled:t.default.bool,href:t.default.string,isExternal:t.default.bool,rel:t.default.string,target:t.default.string};exports.BaseLink=r;
+`,_=k.default.forwardRef((q,y)=>{var o=q,{href:e,rel:r="noreferrer noopener",target:t="_self",disabled:a=!1,isExternal:s=!1}=o,p=i(o,["href","rel","target","disabled","isExternal"]);return m.jsx(R,f({ref:y,target:s?"_blank":t,rel:s?r:void 0,href:a?"#":e,"aria-disabled":a},p))});_.displayName="BaseLink";exports.BaseLink=_;

package/dist/BaseLink/BaseLink.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+export interface BaseLinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+    disabled?: boolean;
+    href?: string;
+    isExternal?: boolean;
+    rel?: string;
+    target?: string;
+}
+export declare const BaseLink: React.ForwardRefExoticComponent<BaseLinkProps & React.RefAttributes<HTMLAnchorElement>>;

package/dist/BaseLink/BaseLink.js

@@ -1,31 +1,51 @@
-import a from "react";
-import e from "prop-types";
-import p from "styled-components";
-const d = p.a`
-  cursor: pointer;
-`, r = a.forwardRef(({ href: s, rel: l, target: n, disabled: o, isExternal: t, ...f }, i) => /* @__PURE__ */ a.createElement(d, {
-  ref: i,
-  target: t ? "_blank" : n,
-  rel: t ? l : void 0,
-  href: o ? "#" : s,
-  disabled: o,
-  ...f
-}));
-r.displayName = "BaseLink";
-r.defaultProps = {
-  disabled: !1,
-  href: void 0,
-  isExternal: !1,
-  rel: "noreferrer noopener",
-  target: "_self"
+var u = Object.defineProperty;
+var f = Object.getOwnPropertySymbols;
+var i = Object.prototype.hasOwnProperty, l = Object.prototype.propertyIsEnumerable;
+var s = (e, o, r) => o in e ? u(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r, m = (e, o) => {
+  for (var r in o || (o = {}))
+    i.call(o, r) && s(e, r, o[r]);
+  if (f)
+    for (var r of f(o))
+      l.call(o, r) && s(e, r, o[r]);
+  return e;
 };
-r.propTypes = {
-  disabled: e.bool,
-  href: e.string,
-  isExternal: e.bool,
-  rel: e.string,
-  target: e.string
+var p = (e, o) => {
+  var r = {};
+  for (var a in e)
+    i.call(e, a) && o.indexOf(a) < 0 && (r[a] = e[a]);
+  if (e != null && f)
+    for (var a of f(e))
+      o.indexOf(a) < 0 && l.call(e, a) && (r[a] = e[a]);
+  return r;
 };
+import { jsx as _ } from "react/jsx-runtime";
+import k from "react";
+import y from "styled-components";
+const B = y.a`
+  cursor: pointer;
+`, L = k.forwardRef((R, c) => {
+  var n = R, {
+    href: e,
+    rel: o = "noreferrer noopener",
+    target: r = "_self",
+    disabled: a = !1,
+    isExternal: t = !1
+  } = n, d = p(n, [
+    "href",
+    "rel",
+    "target",
+    "disabled",
+    "isExternal"
+  ]);
+  return _(B, m({
+    ref: c,
+    target: t ? "_blank" : r,
+    rel: t ? o : void 0,
+    href: a ? "#" : e,
+    "aria-disabled": a
+  }, d));
+});
+L.displayName = "BaseLink";
 export {
-  r as BaseLink
+  L as BaseLink
 };

package/dist/BaseLink/index.d.ts

@@ -0,0 +1 @@
+export * from './BaseLink';

package/dist/BaseRadio/BaseRadio.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const s=require("react"),g=require("prop-types"),y=require("styled-components"),R=require("./context.cjs"),t=require("./utils.cjs"),d=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},i=d(s),r=d(g),S=d(y),$=S.default.input`
+"use strict";var x=Object.defineProperty;var d=Object.getOwnPropertySymbols;var s=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable;var c=(e,o,t)=>o in e?x(e,o,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[o]=t,u=(e,o)=>{for(var t in o||(o={}))s.call(o,t)&&c(e,t,o[t]);if(d)for(var t of d(o))l.call(o,t)&&c(e,t,o[t]);return e};var p=(e,o)=>{var t={};for(var a in e)s.call(e,a)&&o.indexOf(a)<0&&(t[a]=e[a]);if(e!=null&&d)for(var a of d(e))o.indexOf(a)<0&&l.call(e,a)&&(t[a]=e[a]);return t};Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const S=require("react/jsx-runtime"),f=require("react"),$=require("styled-components"),k=require("./context.cjs"),r=require("./utils.cjs"),b=e=>e&&typeof e=="object"&&"default"in e?e:{default:e},j=b(f),_=b($),q=_.default.input`
   margin: 0;
   padding: 0;
   background-color: ${({theme:e})=>e.colors.neutral0};
   border: 1px solid ${({theme:e})=>e.colors.primary600};
   border-radius: 50%;
-  height: ${t.getRadioSize};
-  width: ${t.getRadioSize};
+  height: ${({size:e})=>typeof e=="number"?e:r.getRadioSize(e)};
+  width: ${({size:e})=>typeof e=="number"?e:r.getRadioSize(e)};
   -webkit-appearance: none;
 
   &:after {
@@ -14,10 +14,10 @@
     position: relative;
     z-index: 1;
     display: block;
-    height: ${t.getSelectedRadioSize};
-    width: ${t.getSelectedRadioSize};
-    left: ${t.getSelectedRadioPosition};
-    top: ${t.getSelectedRadioPosition};
+    height: ${({size:e})=>typeof e=="number"?e:r.getSelectedRadioSize(e)};
+    width: ${({size:e})=>typeof e=="number"?e:r.getSelectedRadioSize(e)};
+    left: ${r.getSelectedRadioPosition};
+    top: ${r.getSelectedRadioPosition};
   }
 
   &:checked:after {
@@ -25,7 +25,7 @@
   }
 
   &:disabled {
-    border: 1px solid ${({theme:e})=>e.colors.carbon300};
+    border: 1px solid ${({theme:e})=>e.colors.neutral300};
     background: ${({theme:e})=>e.colors.neutral200};
   }
-`,o=i.default.forwardRef(({value:e,disabled:c,...l},n)=>{const{onChange:u,selected:p,name:f,size:b}=s.useContext(R.RadioContext),a=p===e;return i.default.createElement($,{ref:n,type:"radio",name:f,value:e,tabIndex:a?0:-1,"aria-checked":a,checked:a,disabled:c,size:b,onChange:u,...l})});o.displayName="Radio";o.defaultProps={disabled:!1};o.propTypes={disabled:r.default.bool,value:r.default.string.isRequired};exports.BaseRadio=o;
+`,g=j.default.forwardRef((w,a)=>{var i=w,{value:e,disabled:o=!1}=i,t=p(i,["value","disabled"]);const{onChange:y,selected:R,name:m,size:h}=f.useContext(k.RadioContext),n=R===e;return S.jsx(q,u({ref:a,type:"radio",name:m,value:e,tabIndex:n?0:-1,"aria-checked":n,checked:n,disabled:o,size:h,onChange:y},t))});g.displayName="Radio";exports.BaseRadio=g;

package/dist/BaseRadio/BaseRadio.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+export interface BaseRadioProps extends React.InputHTMLAttributes<HTMLInputElement> {
+    disabled?: boolean;
+    value: string;
+}
+export declare const BaseRadio: React.ForwardRefExoticComponent<BaseRadioProps & React.RefAttributes<HTMLInputElement>>;